diff --git a/.changeset/calm-pianos-joke.md b/.changeset/calm-pianos-joke.md new file mode 100644 index 0000000000..58e80d0c57 --- /dev/null +++ b/.changeset/calm-pianos-joke.md @@ -0,0 +1,5 @@ +--- +'react-select': patch +--- + +Set event listeners to be non-passive to remove Chrome console warnings diff --git a/packages/react-select/src/internal/useScrollCapture.js b/packages/react-select/src/internal/useScrollCapture.js index 61cb0c69bf..151e1e79ce 100644 --- a/packages/react-select/src/internal/useScrollCapture.js +++ b/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) => { 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] diff --git a/packages/react-select/src/utils.js b/packages/react-select/src/utils.js index a5baffbbf4..823f685d85 100644 --- a/packages/react-select/src/utils.js +++ b/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;