From 9e1bc8843f8f212db0437850d7ebbeac2310005c Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Date: Tue, 17 Sep 2024 14:54:42 +0200
Subject: [PATCH] [DataGrid] Fix document reference when the grid is rendered
 in a popup window (#14649)

---
 .../src/hooks/features/cellSelection/useGridCellSelection.ts   | 3 ++-
 .../src/hooks/features/export/useGridPrintExport.tsx           | 3 ++-
 packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts  | 3 ++-
 3 files changed, 6 insertions(+), 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
index d36c314e62923..755b116f5df74 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<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
index 3421133554ebb..2769999d46bcd 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<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
index fb01b27c54e83..2c8e83b008752 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<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);