search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
118.41k stars 24.25k forks source link

FlatList - Extreme scrolling breaks touches with focused TextInput #12976

Closed iggyfisk closed 7 years ago

iggyfisk commented 7 years ago

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

ptomasroos commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 https://github.com/facebook/react-native/issues/12884, but that's temporary and delays events, so different in nature from this permanent event skip.

shergin commented 7 years ago

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

CheragV commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

ptomasroos commented 7 years ago

What a hero @shergin! Looking forward to it!

grin commented 7 years ago

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 commented 7 years ago

https://github.com/facebook/react-native/issues/11809#issuecomment-285938537

shergin commented 7 years ago

Was fixed in 23c2a6cf1ae297182a62d1a8143b55b186f5e1b7. 🎉

ptomasroos commented 7 years ago

Thanks a lot for looking into it Shergin.

On 20 Mar 2017 7:45 AM, "Valentin Shergin" notifications@github.com wrote:

Was fixed in 23c2a6c https://github.com/facebook/react-native/commit/23c2a6cf1ae297182a62d1a8143b55b186f5e1b7. 🎉

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/12976#issuecomment-287687243, or mute the thread https://github.com/notifications/unsubscribe-auth/ABA-Y_LX8iTH4PGuy99QgX249Twa2Vvjks5rniCNgaJpZM4MfS1P .

iggyfisk commented 7 years ago

Fixed as far as I could test, good hustle team!