diff --git a/src/plugin-hooks/useResizeColumns.js b/src/plugin-hooks/useResizeColumns.js index 2e480487e9..cbedfbc3c9 100644 --- a/src/plugin-hooks/useResizeColumns.js +++ b/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, diff --git a/src/utils.js b/src/utils.js index d5975b78d2..f0ad255d4f 100755 --- a/src/utils.js +++ b/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