React-select: non-passive event listener in scroll blocking events

[gugurete]

chrome warnings popping up about non-passive event listeners

react-select.es.js:571 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

[gwyneplaine]

hello @gugurete thanks for raising this, which version of react-select are you using?
Could you also supply us with a codesandbox with your select configuration, just so we can debug/ reason about this a bit easier.

[gugurete]

It is version: 2.0.0-beta.6, and the offending code is in react-select.es.js starting with line 564
I believe it should be something like el.addEventListener('wheel', this.onWheel, {passive: true});
to avoid chrome warning messages.

key: 'startListening',
value: function startListening(el) {
  // bail early if no scroll available
  if (el.scrollHeight <= el.clientHeight) return;

  // all the if statements are to appease Flow 😢
  if (typeof el.addEventListener === 'function') {
    el.addEventListener('wheel', this.onWheel, false);
  }
  if (typeof el.addEventListener === 'function') {
    el.addEventListener('touchstart', this.onTouchStart, false);
  }
  if (typeof el.addEventListener === 'function') {
    el.addEventListener('touchmove', this.onTouchMove, false);
  }
}

[gugurete]

https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

[zike-Q]

I am getting the same warnings on Chrome with "react-select 2.0.0-beta.7":

Added non-passive event listener to a scroll-blocking 'wheel' event.
Added non-passive event listener to a scroll-blocking 'touchstart' event.
Added non-passive event listener to a scroll-blocking 'touchmove' event.

[xakep139]

Same problem with react-select 2.0.0, Chrome version is 68.0.3440.106 (64-bit)

[jossmac]

@gugurete looks good, would you mind submitting a PR?

[xakep139]

@jossmac FYI: #2933

[jossmac]

Re-opened due to #2940

Having non-passive listeners for ScrollCaptor may be unavoidable, but needs further consideration.

[Ericnr]

I'm still having this issue, any update on it?

[misarfraz]

I'm having the same issue as well.
react-select: 3.0.4
Chrome: 74.0.3729.169

[chrisnorwood]

Still happening to me!

[jeltehomminga]

I'm having the same issue as well.
react-select: 3.0.4
Chrome: 74.0.3729.169

same issue for me on

react-select: 3.0.8
Chrome: 78.0.3904.108

[tainefreitas]

Same here!
react-select:3.0.8
Chrome for macOS: Version 79.0.3945.117 (Official Build) (64-bit)

[tainefreitas]

The cause is the flag "menuIsOpen" in my case.
About this tag, I have other problem (when I go back home, I create the issue and link here): I have multiple components in the page, but somehow always goes to the end of the page, where's the react-select is, and when I deactivate the flag, all the problems goes away...

[danielanjos]

I have the same problem when I click for open or set menuIsOpen = true. I'm using the last version.

[b3rg3t]

I have the same problem when I click for open or set menuIsOpen = true. I'm using the last version.

Same here!!
react-select: 3.1.0
chrome: Version 84.0.4147.135 (Official Build) (64-bit)

[KevinDangVN]

Same problem here. When I click to open menu which has items for scrolling.
Using the latest version.
React-select: 3.1.0
Chrome ver: 86.0.4240.75 (Official Build) (64-bit)

[Methuselah96]

I've started a fork of react-select. Feel free to resubmit this issue on the fork and/or submit a PR to resolve this issue on the fork and we can get it merged and released.

EDIT: :tada: I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!