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

Fix: VirtualizedList passive event listener warning #2601

Conversation

tienifr
Copy link
Contributor

@tienifr tienifr commented Oct 25, 2023

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
Copy link

codesandbox-ci bot commented Oct 25, 2023

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

@tienifr tienifr changed the title [Fix] VirtualizedList passive event listener warning Fix: VirtualizedList passive event listener warning Oct 25, 2023
@tienifr tienifr marked this pull request as ready for review October 25, 2023 09:57
Copy link
Owner

@necolas necolas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor Author

tienifr commented Apr 2, 2024

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

@necolas necolas closed this in a0cd8ff Apr 3, 2024
@DennisHesler
Copy link

DennisHesler commented Apr 23, 2024

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

Copy link

@DennisHesler DennisHesler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
      }
    }

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

Successfully merging this pull request may close these issues.

VirtualizedList passive event listener warning
3 participants