react-native-web
react-native-web copied to clipboard
`VirtualizedList` passive event listener warning
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
- Use a
VirtualizedListcomponent - Observe the warning in Chrome 51 or later
Test case
https://codesandbox.io/s/summer-dew-txtgt2
Additional comments
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
- Add
passive: truetowheelevent listener with passive event feature detection in order not to collide withcaptureoption - Remove event
preventDefaultin the listener here:
https://github.com/necolas/react-native-web/blob/a3ea2a0a4fd346a1b32e6cef527878c8e433eef8/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js#L484