[DataGrid] Fix overlay blocking scrollbar when rows is empty (#4281)

mui · Mar 31, 2022 · b4c16bd · b4c16bd
1 parent ca0c766
commit b4c16bd
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 23 deletions.
diff --git a/packages/grid/x-data-grid/src/components/containers/GridRoot.tsx b/packages/grid/x-data-grid/src/components/containers/GridRoot.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useForkRef } from '@mui/material/utils';
+import { useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
-import NoSsr from '@mui/material/NoSsr';
 import { GridRootContainerRef } from '../../models/gridRootContainerRef';
 import { GridRootStyles } from './GridRootStyles';
 import { gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
@@ -32,24 +31,38 @@ const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRo
 
   apiRef.current.rootElementRef = rootContainerRef;
 
+  // Our implementation of <NoSsr />
+  const [mountedState, setMountedState] = React.useState(false);
+  useEnhancedEffect(() => {
+    setMountedState(true);
+  }, []);
+
+  useEnhancedEffect(() => {
+    if (mountedState) {
+      apiRef.current.unstable_updateGridDimensionsRef();
+    }
+  }, [apiRef, mountedState]);
+
+  if (!mountedState) {
+    return null;
+  }
+
   return (
-    <NoSsr>
-      <GridRootStyles
-        ref={handleRef}
-        className={clsx(className, rootProps.classes?.root, gridClasses.root, {
-          [gridClasses.autoHeight]: rootProps.autoHeight,
-        })}
-        role="grid"
-        aria-colcount={visibleColumns.length}
-        aria-rowcount={totalRowCount}
-        aria-multiselectable={!rootProps.disableMultipleSelection}
-        aria-label={rootProps['aria-label']}
-        aria-labelledby={rootProps['aria-labelledby']}
-        {...other}
-      >
-        {children}
-      </GridRootStyles>
-    </NoSsr>
+    <GridRootStyles
+      ref={handleRef}
+      className={clsx(className, rootProps.classes?.root, gridClasses.root, {
+        [gridClasses.autoHeight]: rootProps.autoHeight,
+      })}
+      role="grid"
+      aria-colcount={visibleColumns.length}
+      aria-rowcount={totalRowCount}
+      aria-multiselectable={!rootProps.disableMultipleSelection}
+      aria-label={rootProps['aria-label']}
+      aria-labelledby={rootProps['aria-labelledby']}
+      {...other}
+    >
+      {children}
+    </GridRootStyles>
   );
 });
 

diff --git a/packages/grid/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts b/packages/grid/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts
@@ -9,12 +9,10 @@ export interface GridDimensions {
    * The viewport size not including scrollbars.
    */
   viewportInnerSize: ElementSize;
-
   /**
    * Indicates if a scroll is currently needed to go from the beginning of the first column to the end of the last column.
    */
   hasScrollX: boolean;
-
   /**
    * Indicates if a scroll is currently needed to go from the beginning of the first row to the end of the last row.
    */
@@ -26,17 +24,20 @@ export interface GridDimensionsApi {
    * Triggers a resize of the component and recalculation of width and height.
    */
   resize: () => void;
-
   /**
    * Returns the dimensions of the grid
    * @returns {GridDimensions | null} The dimension information of the grid. If `null`, the grid is not ready yet.
    */
   getRootDimensions: () => GridDimensions | null;
-
   /**
    * Returns the amount of rows that are currently visible in the viewport
    * @returns {number} The amount of rows visible in the viewport
    * @ignore - do not document.
    */
   unstable_getViewportPageSize: () => number;
+  /**
+   * Forces a recalculation of all dimensions.
+   * @ignore - do not document.
+   */
+  unstable_updateGridDimensionsRef: () => void;
 }
diff --git a/packages/grid/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/grid/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
@@ -183,6 +183,7 @@ export function useGridDimensions(
     resize,
     getRootDimensions,
     unstable_getViewportPageSize: getViewportPageSize,
+    unstable_updateGridDimensionsRef: updateGridDimensionsRef,
   };
 
   useGridApiMethod(apiRef, dimensionsApi, 'GridDimensionsApi');

diff --git a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx
@@ -863,6 +863,27 @@ describe('<DataGrid /> - Layout & Warnings', () => {
       expect(virtualScroller!.scrollWidth - virtualScroller!.clientWidth).not.to.equal(0);
     });
 
+    it('should not place the overlay on top of the horizontal scrollbar when rows=[]', () => {
+      const headerHeight = 40;
+      const height = 300;
+      const border = 1;
+      render(
+        <div style={{ width: 100 + 2 * border, height: height + 2 * border }}>
+          <DataGrid
+            rows={[]}
+            columns={[{ field: 'brand' }, { field: 'price' }]}
+            headerHeight={headerHeight}
+            hideFooter
+          />
+        </div>,
+      );
+      const virtualScroller = document.querySelector<HTMLElement>('.MuiDataGrid-virtualScroller');
+      const scrollBarSize = virtualScroller!.offsetHeight - virtualScroller!.clientHeight;
+      const overlayWrapper = screen.getByText('No rows').parentElement;
+      const expectedHeight = height - headerHeight - scrollBarSize;
+      expect(overlayWrapper).toHaveComputedStyle({ height: `${expectedHeight}px` });
+    });
+
     // See https://github.com/mui/mui-x/issues/3795#issuecomment-1028001939
     it('should expand content height when there are no rows', () => {
       render(