Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VirtializedList on web error to scroll inverter. Unable to preventDefault inside passive event listener invocation #2658

Closed
1 task done
DennisHesler opened this issue Apr 23, 2024 · 0 comments
Labels

Comments

@DennisHesler
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant