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

`VirtualizedList` passive event listener warning

Open tienifr opened this issue 2 years ago • 0 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Describe the issue

Passive event warning [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event appears when using VirtualizedList. Happens on Chrome 51 or later which support passive event listener.

Expected behavior

The passive event warning does not appear.

Steps to reproduce

  1. Use a VirtualizedList component
  2. Observe the warning in Chrome 51 or later

Test case

https://codesandbox.io/s/summer-dew-txtgt2

Additional comments

image

Proposed solution

Root cause

We're not using passive options for performance improvement when adding listener for the wheel event here:

https://github.com/necolas/react-native-web/blob/a3ea2a0a4fd346a1b32e6cef527878c8e433eef8/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js#L748-L750

Solution

  1. Add passive: true to wheel event listener with passive event feature detection in order not to collide with capture option
  2. Remove event preventDefault in the listener here:

https://github.com/necolas/react-native-web/blob/a3ea2a0a4fd346a1b32e6cef527878c8e433eef8/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js#L484

tienifr avatar Oct 18 '23 19:10 tienifr