Fix: VirtualizedList passive event listener warning

[tienifr]

Details

Fixes #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]

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 8caedca:

Sandbox	Source
react-native-web-examples	Configuration

[necolas]

Only needs the options object, no need to export/import an internal helper.

Note that VirtualizedList is no longer synced and maintained by RNfWeb. Expensify should contribute to getting the component exported as a package and work web-related features into the upstream source of truth facebook/react-native#35263

[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 #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 });

[DennisHesler]

Its not work in inverted list, need to passive false to work..
you can fix rhis?

    setupWebWheelHandler() {
      if (this._scrollRef && this._scrollRef.getScrollableNode && this._scrollRef.inverted) {
        this._scrollRef.getScrollableNode().addEventListener('wheel',
            this.invertedWheelEventHandler,
        );
      } else {
        setTimeout(() => this.setupWebWheelHandler(), 50);
        return
      }
    }