Description
Is there an existing issue for this?
- I have searched the existing issues
Describe the issue
Problem:
When nesting a horizontal FlatList inside a vertical inverted FlatList, the inner one (non-inverted) doesn't scroll by using touchpad/mouse wheel.
Probable cause:
When handling the inverted FlatLists's scrolling in invertedWheelEventHandler
in react-native-web/dist/vendor/react-native/VirtualizedList/index.js
, the ev.preventDefault()
added at the end prevents event from bubbling further, but that means that prevents nested FlatList from being scrolled.
Demo recording:
Outer FlatList is inverted; Inner FlatLists are not inverted at the start (don't scroll) and then are switched to inverted (scroll):
https://github.com/user-attachments/assets/8f3cdc2c-0d71-4636-a165-e5c4ae60eb91
Expected behavior
Both FlatLists scroll
Steps to reproduce
- Create inverted vertical FlatList 1
- Add a couple of children to FlatList 1 - just so it can be scrollable
- Render at least one of FlatlList 1's children as a horizontal FlatList 2 with as many children as it is necessary for it to scroll
- Notice that it is impossible to scroll FlatList 2 with a touchpad or mouse wheel
- Change FlatList 2 to
inverted
- Notice that FlatList 2 scrolls now which proves that it potentially can be scrollable
- Delete FlatList 1's
inverted
prop - Notice that FlatList 1 can't be scrolled no more, when FlatList 2 can.
Test case
https://codesandbox.io/p/sandbox/reverent-julien-pmlxy8
Additional comments
Interesting addition is that this problem occurs only if one of the lists is inverted and the other not - then only the inverted one scrolls; If both of them are inverted or not, then both scrolls.
This problem probably occurs even if both lists are the same direction and when outer list is horizontal and inner is vertical; I'm focusing mainly on the case above though.
Proposal PR:
I've found a possible solution handling the case above, though probably solves only the case when two nested lists have different directions - will link it when it's ready.