FlatList - Extreme scrolling breaks touches with focused TextInput

[iggyfisk]

Description

With a FlatList that has a fairly large number of items, sometimes you can scroll far/fast enough to permanently break something around TextInputs and touches. After "extreme" scrolling inside the FlatList, and after something is typed into a TextInput, the first touch outside the TextInput is swallowed. The second touch works as normal. It's hard to describe so I made a test project to reproduce and recorded a video to show every step and the resulting error.

The video is recorded using the iOS simulator, but the bug occurs on every iOS system we've tried so far, regardless of hardware or OS version. We have yet to reproduce it on Android.

We're not sure of the relevance of scroll speed, Y position, or number of items. Our live application has much fewer items than the test application in the video, but it's still easy to reproduce there. Probably because those items are more taxing on the hardware (images, different opacity etc). But that's all conjecture.

Either way this happens organically in our application and is preventing us from releasing our move away from ListView to production, which is a shame because overall the performance improvements with FlatList have been fantastic.

Reproduction

This repository contains the test application from the video above. scrolltest.js has all the relevant code.

Clone the repository, npm install, react-native run-ios, quickly scroll through the list, type something in the text input and try the "Clear" button. I highly recommend watching the video so you'll know what I'm talking about.

Additional Information

• React Native version: Current RN master d5dda1b with React 16.0.0-alpha.3
• Platform: iOS simulator and device. Android seems unaffected.

[ptomasroos]

Please take a look at this whenever you have the time @sahrens since its holding us back from moving FlatList to production. Our feeling is that its not just happening on extremely fast scroll, but thats a very easy way to reproduce it. It happens otherwise too just not deterministically. Cheers!

[sahrens]

iOS only? And you don't see the same problem with ListView and the same level of "extreme scrolling"? Very odd. I wonder if it could be related to event coalescing? @shergin - maybe you can take a look?

[iggyfisk]

I gave it another shot now that my scrolling hand is Usain Scrollt and could not make it happen with ListView nor Android.

On Android I would sometimes run into #12884, but that's temporary and delays events, so different in nature from this permanent event skip.

[shergin]

OMG, this bug report is so amazing! Thank you, @iggyfisk!
I will try to debug it soon.

[CheragV]

I am facing a similar issue with my project. While the text input is focused 2 things happen :

1 => scrolling works as usual, so this is great
2=> when I touch the list to select an option the first touch doesn't work, I checked onBlur is called at this point, and then the second press works just fine

I am not sure if it is the same problem you are facing, If not do you have a solution to this @iggyfisk ?
Thanks 👍

[iggyfisk]

That doesn't sound like the exact same thing @CheragV, once I break things by monster scrolling a FlatList, the onBlur handler on TextInputs still works as expected. It doesn't fire on the first touch after typing since that touch gets eaten by the bug.

Either way my solution so far is to spend an hour doing retakes of a bug report video, then wait for the California boys to sort it out.

[shergin]

I found an actual problem. The fix is coming! 🎉

[ptomasroos]

What a hero @shergin! Looking forward to it!

[grin]

I'm also running into a similar issue where extreme scrolling of a FlatList breaks touches. In my app I have a list of 100-200 items where each item has two touchable areas. After a bit of scrolling elements stop responding to touches, sometimes it takes a second try for it to work but sometimes it's 3-4 touches. I don't use TextInputs.

[RichardLindhout]

#11809 (comment)