search

necolas / react-native-web

Cross-platform React UI packages
https://necolas.github.io/react-native-web
MIT License
21.59k stars 1.78k forks source link

FlatList with `horizontal` and `inverted` prevents page scroll on hover #2418

Open JWesorick opened 1 year ago

JWesorick commented 1 year ago

Is there an existing issue for this?

Describe the issue

When using inverted and horizontal on a FlatList the page gets "stuck" as you scroll down and the mouse cursor is over the horizontal Flatlist.

Expected behavior

Should be able to smoothly scroll down a page with a horizontal inverted FlatList.

Steps to reproduce

With a FlatList with inverted and horizontal on a long page that is long enough to scroll in the y direction, on a computer, in a browser, with a mouse:

  1. Scroll down the page using a mouse wheel.
  2. The mouse cursor crosses the horizontal FlatList (:hover)
  3. Page scrolling is now "stuck". Continuing to move the mouse wheel does nothing.

Test case

https://snack.expo.dev/@jjws/flatlist_with_horizontal_and_inverted

Additional comments

No response

necolas commented 12 months ago

The web fork of FlatList is no longer being maintained, but updating it is blocked on this React Native issue that will allow RN Web to install the same package used in RN. You should comment there https://github.com/facebook/react-native/issues/35263