[DataGrid] Fix grid size calculation when .MuiDataGrid-main has bor…

…der (#8882)
mui · May 18, 2023 · d199f47 · d199f47
1 parent efd46f4
commit d199f47
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
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
@@ -220,8 +220,8 @@ export function useGridDimensions(
       return;
     }
 
-    const height = mainEl.offsetHeight || 0;
-    const width = mainEl.offsetWidth || 0;
+    const height = mainEl.clientHeight || 0;
+    const width = mainEl.clientWidth || 0;
 
     const win = ownerWindow(mainEl);
 

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
@@ -12,7 +12,7 @@ import {
 } from '@mui/x-data-grid';
 import { useBasicDemoData } from '@mui/x-data-grid-generator';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { getColumnHeaderCell, getColumnValues, getCell, getRow } from 'test/utils/helperFn';
+import { getColumnHeaderCell, getColumnValues, getCell, getRow, sleep } from 'test/utils/helperFn';
 
 describe('<DataGrid /> - Layout & Warnings', () => {
   const { clock, render } = createRenderer();
@@ -1099,4 +1099,32 @@ describe('<DataGrid /> - Layout & Warnings', () => {
       });
     });
   });
+
+  // See https://github.com/mui/mui-x/issues/8737
+  it('should not add horizontal scrollbar when .MuiDataGrid-main has border', async function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      // Need layouting
+      this.skip();
+    }
+
+    render(
+      <div style={{ height: 300, width: 400, display: 'flex' }}>
+        <DataGrid
+          rows={[{ id: 1 }]}
+          columns={[{ field: 'id', flex: 1 }]}
+          sx={{ '.MuiDataGrid-main': { border: '2px solid red' } }}
+        />
+      </div>,
+    );
+
+    const virtualScroller = document.querySelector<HTMLElement>('.MuiDataGrid-virtualScroller')!;
+    const initialVirtualScrollerWidth = virtualScroller.clientWidth;
+
+    // It should not have a horizontal scrollbar
+    expect(virtualScroller.scrollWidth - virtualScroller.clientWidth).to.equal(0);
+
+    await sleep(200);
+    // The width should not increase infinitely
+    expect(virtualScroller.clientWidth).to.equal(initialVirtualScrollerWidth);
+  });
 });