addEventListener support

[Elijen]

This library does not seem to work with SVG elements. Delay is still present on those.

[JakeSidSmith]

Thanks for bringing this to my attention, I had not tested this with SVGs. Just need a little more info from you.

Are the SVGs inline, embeded, or src on an img tag? Is the problem with onClick handlers on the svg tag itself or inner shapes? What shapes have you tried that are having issues? What version of React are you using?

[Elijen]

I am using react-inlinesvg to include inline SVG from a file. It contains mostly path elements.

I am using addEventListener('click', ...) to add "onClick" listeners on the inner shapes, which - as I think about it now - could be the problem. I temporarily switched to ftlabs/fastclick and both this issue and #29 disappeared.

react: v15.1.0 react-dom: v15.1.0 react-fastclick: v2.1.1

[JakeSidSmith]

Ah, so react-fastclick is only designed to add the fastclick events to React components that have the onClick prop or other elements with special functionality. Buy using addEventListener, you're going outside of the React stuff somewhat (though I understand this is necessary some times).

Have you tried using both ftlabs and react-fastclick together? I cannot say I've tried this, but it could solve your problem.

[dahjelle]

As I mentioned in https://github.com/react-bootstrap/react-overlays/issues/64, I'm having a problem where the DropdownButton component in react-bootstrap opens and closes immediately when I'm using react-fastclick. The issue appears to be this one: react-bootstrap uses addEventListener to the document to make clicks outside the drop-down menu close the menu. Thus, the first click on the drop-down:

1) gets correctly rewritten by react-fastclick and opens the dropdown menu. 2) the native browser touch-then-click behavior also fires after bubbling up to the document, thereby closing the menu. Presumably this is the after-300-ms event.

This does not happen with react-fastclick installed.

It's not very clear to me what the correct thing for either react-bootstrap or react-fastclick is to do here. Any thoughts?

[dahjelle]

I installed ftlabs/fastclick library in addition to react-fastclick. I'm not yet sure what the behavior is…it is different, and does seem to open the drop-down, but I'm not sure that behavior is still quite right.

I've not looked much…is the ftlabs library the equivalent of react-fastclick for native browser events?

[dahjelle]

Quoting myself from the react-overlays issue:

Here's my current hypothesis: react-fastclick mutates the React event to make the click event happen more quickly, but doesn't do anything to the native browser events. Normally, this works fine, but in the case of react-overlays the componentDidMount attaches event listeners for a click on document. Without react-fastclick, this works as expected. With react-fastclick, however, the overlay and the event listeners are added, and, then, 300 ms later, the native click event (the "slow" click) fires, closing the dropdown.

A brief test this evening seems to indicate that

          event.nativeEvent.preventDefault();

inside the onTouchEnd function seems to solve my issue, but I've not tested this very thoroughly.

Anyone have any immediate thoughts?

[JakeSidSmith]

preventDefault would unfortunately prevent some useful events from happening, that help with things like focusing inputs & checking checkboxes.

The fix, I believe, is to add fastclicks to addEventListeners so that both types of events work nicely together.

[dahjelle]

Yes, I see the issues you mentioned with checkboxes and inputs.

I've tried the simple addition of ftlabs/fastclick to my app, but it seems to have broken anchor tags on iOS. It did fix the immediate issue, though…some more spelunking is in order.

Thanks for your input!!!