Skip to content

Nested inverted Flatlist is not scrollable #2771

Open
@Guccio163

Description

@Guccio163

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

  1. Create inverted vertical FlatList 1
  2. Add a couple of children to FlatList 1 - just so it can be scrollable
  3. 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
  4. Notice that it is impossible to scroll FlatList 2 with a touchpad or mouse wheel
  5. Change FlatList 2 to inverted
  6. Notice that FlatList 2 scrolls now which proves that it potentially can be scrollable
  7. Delete FlatList 1's inverted prop
  8. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions