Merge pull request #4437 from JedWatson/add-non-passive-event-listeners

Declare event listeners as non-passive to remove browser warnings

.changeset/calm-pianos-joke.md

@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Set event listeners to be non-passive to remove Chrome console warnings

packages/react-select/src/internal/useScrollCapture.js

@@ -1,6 +1,7 @@
 // @flow
 
 import { useCallback, useEffect, useRef } from 'react';
+import { supportsPassiveEvents } from '../utils';
 
 const cancelScroll = (event: SyntheticEvent<HTMLElement>) => {
   event.preventDefault();
@@ -101,15 +102,16 @@ export default function useScrollCapture({
       // bail early if no element is available to attach to
       if (!el) return;
 
+      const notPassive = supportsPassiveEvents ? { passive: false } : false;
       // all the if statements are to appease Flow 😢
       if (typeof el.addEventListener === 'function') {
-        el.addEventListener('wheel', onWheel, false);
+        el.addEventListener('wheel', onWheel, notPassive);
       }
       if (typeof el.addEventListener === 'function') {
-        el.addEventListener('touchstart', onTouchStart, false);
+        el.addEventListener('touchstart', onTouchStart, notPassive);
       }
       if (typeof el.addEventListener === 'function') {
-        el.addEventListener('touchmove', onTouchMove, false);
+        el.addEventListener('touchmove', onTouchMove, notPassive);
       }
     },
     [onTouchMove, onTouchStart, onWheel]

packages/react-select/src/utils.js

@@ -268,3 +268,22 @@ export function isMobileDevice() {
     return false;
   }
 }
+
+// ==============================
+// Passive Event Detector
+// ==============================
+
+// https://github.com/rafgraph/detect-it/blob/main/src/index.ts#L19-L36
+let passiveOptionAccessed = false;
+const options = {
+  get passive() {
+    return (passiveOptionAccessed = true);
+  },
+};
+
+if (document.addEventListener && document.removeEventListener) {
+  document.addEventListener('p', noop, options);
+  document.removeEventListener('p', noop, false);
+}
+
+export const supportsPassiveEvents: boolean = passiveOptionAccessed;