fix: detect browser support for passive events (#2325)

Author: BrianMitchL

src/plugin-hooks/useResizeColumns.js

@@ -6,7 +6,7 @@ import {
   ensurePluginOrder,
 } from '../publicUtils'
 
-import { getFirstDefined } from '../utils'
+import { getFirstDefined, passiveEventSupported } from '../utils'
 
 // Default Column
 defaultColumn.canResize = true
@@ -95,12 +95,19 @@ const defaultGetResizerProps = (props, { instance, header }) => {
     const events = isTouchEvent
       ? handlersAndEvents.touch
       : handlersAndEvents.mouse
-    document.addEventListener(events.moveEvent, events.moveHandler, {
-      passive: false,
-    })
-    document.addEventListener(events.upEvent, events.upHandler, {
-      passive: false,
-    })
+    const passiveIfSupported = passiveEventSupported()
+      ? { passive: false }
+      : false
+    document.addEventListener(
+      events.moveEvent,
+      events.moveHandler,
+      passiveIfSupported
+    )
+    document.addEventListener(
+      events.upEvent,
+      events.upHandler,
+      passiveIfSupported
+    )
 
     dispatch({
       type: actions.columnStartResizing,

src/utils.js

@@ -280,6 +280,29 @@ export function unpreparedAccessWarning() {
   )
 }
 
+let passiveSupported = null
+export function passiveEventSupported() {
+  // memoize support to avoid adding multiple test events
+  if (typeof passiveSupported === 'boolean') return passiveSupported
+
+  let supported = false
+  try {
+    const options = {
+      get passive() {
+        supported = true
+        return false
+      },
+    }
+
+    window.addEventListener('test', null, options)
+    window.removeEventListener('test', null, options)
+  } catch (err) {
+    supported = false
+  }
+  passiveSupported = supported
+  return passiveSupported
+}
+
 //
 
 const reOpenBracket = /\[/g