react-native-web icon indicating copy to clipboard operation
react-native-web copied to clipboard

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

Open JWesorick opened this issue 2 years ago • 1 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

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

JWesorick avatar Nov 03 '22 09:11 JWesorick

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

necolas avatar Sep 21 '23 00:09 necolas