Description
Is there an existing issue for this?
- I have searched the existing issues
Describe the issue
With this Fix: PR 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 });
Expected behavior
change the fix for: element.addEventListener('wheel', this.invertedWheelEventHandler, { passive: false });
Steps to reproduce
"react-native-web": "~0.19.6",
"expo": "~49.0.21",
"react-native": "0.72.3",
Test case
nn
Additional comments
nn