diff --git a/packages/eui/src/components/datagrid/body/header/draggable_columns.tsx b/packages/eui/src/components/datagrid/body/header/draggable_columns.tsx index 7c754013184..b8245e92cc8 100644 --- a/packages/eui/src/components/datagrid/body/header/draggable_columns.tsx +++ b/packages/eui/src/components/datagrid/body/header/draggable_columns.tsx @@ -132,16 +132,24 @@ export const DraggableColumn: FunctionComponent<{ const { setFocusedCell } = useContext(DataGridFocusContext); const handleOnMouseDown: MouseEventHandler = useCallback( (e) => { - const openFocusTrap = document.querySelector( + const openFocusTraps = document.querySelectorAll( '[data-focus-lock-disabled="false"]' ); - if ( - !!openFocusTrap && // If a focus trap is open somewhere on the page - !openFocusTrap.contains(e.target as Node) && // & the focus trap doesn't belong to this header - e.target !== actionsPopoverToggle // & we're not closing the actions popover toggle - ) { + const validOpenFocusTraps = [...openFocusTraps].filter( + (focusTrap) => + !focusTrap.querySelector('.euiModal') && // if it's not a modal + !focusTrap.contains(e.target as Node) // & if it doesn't contain the target + ); + + const shouldDispatchEvent = validOpenFocusTraps.some( + (focusTrap) => + !!focusTrap && // If there is a focus trap is open + e.target !== actionsPopoverToggle // & we're not closing the actions popover toggle + ); + + if (shouldDispatchEvent) { // Trick the focus trap lib into registering an outside click - - // the drag/drop lib otherwise otherwise prevents the event 💀 + // the drag/drop lib otherwise prevents the event 💀 document.dispatchEvent(new MouseEvent('mousedown')); } setTimeout(() => {