TapEventPlugin sending tap to wrong element in Chrome for Android

[appsforartists]

I'm using TapEventPlugin to open a drawer when you tap an icon. After you tap, the icon is covered with a scrim that will close the drawer if you tap it separately.

On my Chromebook Pixel touchscreen and on an iPhone, this works splendidly. On my Nexus 5, the icon is getting a touchtap while my finger is still touching it. Then, when I lift my finger, it sends another tap to the scrim, which closes the drawer.

Here's a sample repo that demonstrates the bug. I'll see if I can isolate the root cause and send in a PR.

This is most likely related to #2061.

[appsforartists]

I made a JSFiddle (source, demo) to test how this behaves in vanilla JavaScript across Android and iOS. In both cases, if you place something under the user's finger in a touchend listener, you'll get a mousedown/mouseup/click triad on the new element. This seems to be a browser bug on both platforms.

I haven't yet tested Safari to see why TapEventPlugin seems to be behaving correctly there, but not on Android.

[appsforartists]

From the spec:

If the user agent intreprets a sequence of touch events as a click, then it should dispatch mousemove, mousedown, mouseup, and click events (in that order) at the location of the touchend event for the corresponding touch input. If the contents of the document have changed during processing of the touch events, then the user agent may dispatch the mouse events to a different target than the touch events.

ಠ_ಠ

[appsforartists]

This is a frustrating side-effect of #2061. As the fix for that will likely fix this as well, I'm closing this issue.