[DataGrid] Fix error logged during skeleton loading with nested data …

…grid (#14186)
mui · Aug 14, 2024 · 1deed31 · 1deed31
1 parent 591277b
commit 1deed31
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx b/packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx
@@ -171,7 +171,12 @@ const GridSkeletonLoadingOverlay = React.forwardRef<
         }
 
         if (hasScrollbarFiller) {
-          rowCells.push(<GridScrollbarFillerCell pinnedRight={pinnedColumns.right.length > 0} />);
+          rowCells.push(
+            <GridScrollbarFillerCell
+              key={`skeleton-scrollbar-filler-${i}`}
+              pinnedRight={pinnedColumns.right.length > 0}
+            />,
+          );
         }
       }
 

diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -690,11 +690,19 @@ export const GridRootStyles = styled('div', {
       borderTop: '1px solid var(--DataGrid-rowBorderColor)',
     },
 
-    /* Hide grid rows and vertical scrollbar when skeleton overlay is visible */
+    /* Hide grid rows, row filler, and vertical scrollbar when skeleton overlay is visible */
     [`& .${c['main--hasSkeletonLoadingOverlay']}`]: {
-      [`& .${c.virtualScrollerContent}, & .${c['scrollbar--vertical']}, & .${c.pinnedRows}`]: {
-        display: 'none',
+      [`& .${c.virtualScrollerContent}`]: {
+        // We use visibility hidden so that the virtual scroller content retains its height.
+        // Position fixed is used to remove the virtual scroller content from the flow.
+        // https://github.com/mui/mui-x/issues/14061
+        position: 'fixed',
+        visibility: 'hidden',
       },
+      [`& .${c['scrollbar--vertical']}, & .${c.pinnedRows}, & .${c.virtualScroller} > .${c.filler}`]:
+        {
+          display: 'none',
+        },
     },
   };