Fix: `VirtualizedList` passive event listener warning

[tienifr]

Details

Fixes https://github.com/necolas/react-native-web/issues/2598.

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. This PR eliminates the warning by adding passive event listener support for VitualizedList.

Tests

1. Use a VirtualizedList component
2. Verify the warning does not appear in Chrome 51 or later

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8caedcab261038198acb24aed7caca65681b1031:

Sandbox	Source
react-native-web-examples	Configuration

[tienifr]

cc @Beamanator or @roryabraham on the above ^ as I see you are the maintainter of the RNW tracker.

[DennisHesler]

With this Fix they released they broke the VirtualizedList of react-native in react-native-web with the list inverted. error: Unable to preventDefault inside passive event listener invocation.

code of: node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js

// REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller. // For issue https://github.com/necolas/react-native-web/issues/995 this.invertedWheelEventHandler = ev => { var scrollOffset = this.props.horizontal ? ev.target.scrollLeft : ev.target.scrollTop; var scrollLength = this.props.horizontal ? ev.target.scrollWidth : ev.target.scrollHeight; var clientLength = this.props.horizontal ? ev.target.clientWidth : ev.target.clientHeight; var isEventTargetScrollable = scrollLength > clientLength; var delta = this.props.horizontal ? ev.deltaX || ev.wheelDeltaX : ev.deltaY || ev.wheelDeltaY; var leftoverDelta = delta; if (isEventTargetScrollable) { leftoverDelta = delta < 0 ? Math.min(delta + scrollOffset, 0) : Math.max(delta - (scrollLength - clientLength - scrollOffset), 0); } var targetDelta = delta - leftoverDelta; if (this.props.inverted && this._scrollRef && this._scrollRef.getScrollableNode) { var node = this._scrollRef.getScrollableNode(); if (this.props.horizontal) { ev.target.scrollLeft += targetDelta; var nextScrollLeft = node.scrollLeft - leftoverDelta; node.scrollLeft = !this.props.getItemLayout ? Math.min(nextScrollLeft, this._totalCellLength) : nextScrollLeft; } else { ev.target.scrollTop += targetDelta; var nextScrollTop = node.scrollTop - leftoverDelta; node.scrollTop = !this.props.getItemLayout ? Math.min(nextScrollTop, this._totalCellLength) : nextScrollTop; } ev.preventDefault(); <---ERROR HERE } }; ev.preventDefault() is failing; and therefore it does not scroll in the virtualized lists.

to fix it:

element.addEventListener('wheel', this.invertedWheelEventHandler, { passive: false });