Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: nested scroll in inverted VirtualizedList #2436

Conversation

roryabraham
Copy link
Contributor

@roryabraham roryabraham commented Nov 22, 2022

Fixes #2435

Details

This workaround fixes wheel events in inverted FlatLists, but overrides the default wheel event handler for inputs. Therefore, if you have a scrollable node as a child of an inverted FlatList, the scroll on that node is broken unless you employ a workaround by adding a wheel event listener to the child as well.

This PR fixes the workaround for wheel events in inverted FlatList by:

  1. Calculate the scroll for the event target (if any)
  2. Calculate the "leftover scroll" in excess of the target scroll bounds (if any)
  3. Applies the inverse of the "leftover scroll" on the FlatList

Testing steps

My testing steps were a bit crude...

  1. Go to the codesandbox reproduction for the original issue
  2. Observe the issue in action.
  3. Open the JS console, and do a global search for invertedWheelEventHandler
  4. Copy/paste this code change into the source code, removing the couple flow type annotations are in this function.
  5. Observe the fix in action

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8ca5167:

Sandbox Source
react-native-web-examples Configuration
RNW-NestedTextInputScroll Issue #2435

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Scroll does not work for TextInput nested in inverted FlatList
2 participants