diff --git a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts index d36c314e6292..755b116f5df7 100644 --- a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts +++ b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts @@ -62,6 +62,7 @@ export const useGridCellSelection = ( | 'columnHeaderHeight' >, ) => { + const hasRootReference = apiRef.current.rootElementRef.current !== null; const visibleRows = useGridVisibleRows(apiRef, props); const cellWithVirtualFocus = React.useRef(); const lastMouseDownCell = React.useRef(); @@ -476,7 +477,7 @@ export const useGridCellSelection = ( const document = ownerDocument(rootRef); document.removeEventListener('mouseup', handleMouseUp); }; - }, [apiRef, handleMouseUp, stopAutoScroll]); + }, [apiRef, hasRootReference, handleMouseUp, stopAutoScroll]); const checkIfCellIsSelected = React.useCallback>( (isSelected, { id, field }) => { diff --git a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx index 3421133554eb..2769999d46bc 100644 --- a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx +++ b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx @@ -67,6 +67,7 @@ export const useGridPrintExport = ( apiRef: React.MutableRefObject, props: Pick, ): void => { + const hasRootReference = apiRef.current.rootElementRef.current !== null; const logger = useGridLogger(apiRef, 'useGridPrintExport'); const doc = React.useRef(null); const previousGridState = React.useRef(null); @@ -76,7 +77,7 @@ export const useGridPrintExport = ( React.useEffect(() => { doc.current = ownerDocument(apiRef.current.rootElementRef!.current!); - }, [apiRef]); + }, [apiRef, hasRootReference]); // Returns a promise because updateColumns triggers state update and // the new state needs to be in place before the grid can be sized correctly diff --git a/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts b/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts index fb01b27c54e8..2c8e83b00875 100644 --- a/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts +++ b/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts @@ -43,6 +43,7 @@ export const useGridFocus = ( const logger = useGridLogger(apiRef, 'useGridFocus'); const lastClickedCell = React.useRef(null); + const hasRootReference = apiRef.current.rootElementRef.current !== null; const publishCellFocusOut = React.useCallback( (cell: GridCellCoordinates | null, event: GridEventLookup['cellFocusOut']['event']) => { @@ -489,7 +490,7 @@ export const useGridFocus = ( return () => { doc.removeEventListener('mouseup', handleDocumentClick); }; - }, [apiRef, handleDocumentClick]); + }, [apiRef, hasRootReference, handleDocumentClick]); useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur); useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick);