[DataGrid] Fix document reference when the grid is rendered in a popu…

…p window (mui#14649)
arthurbalduini · Sep 30, 2024 · 9e1bc88 · 9e1bc88
1 parent 77e3e1c
commit 9e1bc88
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
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
@@ -62,6 +62,7 @@ export const useGridCellSelection = (
     | 'columnHeaderHeight'
   >,
 ) => {
+  const hasRootReference = apiRef.current.rootElementRef.current !== null;
   const visibleRows = useGridVisibleRows(apiRef, props);
   const cellWithVirtualFocus = React.useRef<GridCellCoordinates | null>();
   const lastMouseDownCell = React.useRef<GridCellCoordinates | null>();
@@ -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<GridPipeProcessor<'isCellSelected'>>(
     (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
@@ -67,6 +67,7 @@ export const useGridPrintExport = (
   apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
   props: Pick<DataGridProcessedProps, 'pagination' | 'columnHeaderHeight' | 'headerFilterHeight'>,
 ): void => {
+  const hasRootReference = apiRef.current.rootElementRef.current !== null;
   const logger = useGridLogger(apiRef, 'useGridPrintExport');
   const doc = React.useRef<Document | null>(null);
   const previousGridState = React.useRef<GridInitialStateCommunity | null>(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
@@ -43,6 +43,7 @@ export const useGridFocus = (
   const logger = useGridLogger(apiRef, 'useGridFocus');
 
   const lastClickedCell = React.useRef<GridCellParams | null>(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);