Event touchstart has (randomly) incorrect target during scroll on mobile

[neooleg]

STR

1. Use List example
2. Toggle page to device emulation
3. Handle touchstart event and check e.target in JS Console
4. Scroll the list using left click (i.e. do not use scroll wheel) to simulate touchstart event

AR

Randomly (the regularity is not revealed) target contains list instead of item!

ER

Item should be always a target for touchstart, otherwise, it leads to issue build on top of react-virtualized, e.g. drag & drop, auto scroll, etc.

Issue Demonstration

GIF file (26 Mb)

Investigation Notes

• Issue reproduces only if vertical scroll happens
• If you wait a couple of seconds_ before scrolling again -- the list element will never be in e.target, i.e. issue will not reproduce

[bvaughn]

I don't understand how this is an issue for react-virtualized in any way. This library doesn't dispatch any events. It just generates a DOM structure more efficiently.

Is there any chance you're confusing target and currentTarget?

Unless you can help me understand the actionable item here, I'm going to have to close this.

[neooleg]

It's need to be investigated on react-virtualized level because a simple scrollable divs on Plunker doesn't have this issue:

We assume there are possible reasons:

• Buffering somehow affects scroll
• DOM elements in react-virtualized rendered in some special way

BTW, it reproduces on any found browser (Safari, Android Browser, Samsung Internet, Chrome, etc.), so it seems it's not a browsers bugs it looks like an expected behavior for particular solution.

[bvaughn]

@neooleg By default, RV disables pointer-events while scrolling (see #724, #697, #564). All windowing libs (at least all I know of) do this. You can prevent this behavior by passing in your own containerStyle that sets pointer-events: "auto" (and overrides RV's default). I believe this is why the target is different from some of the touch events.

I'm going to close this issue because I don't think there's anything RV can/should do differently here.

[neooleg]

Thanks a lot, it helped with Safari on iOS, but has another issue on Chrome (Android) -- touchmove receives after ~2 seconds after scroll ends. However, this is another story.