[DataGrid] Fix container width change on React 18 (mui#5566)

alexfauquette · Aug 26, 2022 · 84ab648 · 84ab648
1 parent f7a116e
commit 84ab648
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -218,10 +218,8 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
     setContainerWidth(rootRef.current!.clientWidth);
   }, [rowsMeta.currentPageTotalHeight]);
 
-  const handleResize = React.useCallback<GridEventListener<'resize'>>(() => {
-    if (rootRef.current) {
-      setContainerWidth(rootRef.current.clientWidth);
-    }
+  const handleResize = React.useCallback<GridEventListener<'resize'>>((params) => {
+    setContainerWidth(params.width);
   }, []);
 
   useGridApiEventHandler(apiRef, 'resize', handleResize);

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
@@ -1,7 +1,7 @@
 import * as React from 'react';
 // @ts-ignore Remove once the test utils are typed
 import { createRenderer, screen, ErrorBoundary, waitFor } from '@mui/monorepo/test/utils';
-import { SinonStub, stub, spy } from 'sinon';
+import { stub, spy } from 'sinon';
 import { expect } from 'chai';
 import {
   DataGrid,
@@ -17,7 +17,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { getColumnHeaderCell, getColumnValues, getCell, getRow } from 'test/utils/helperFn';
 
 describe('<DataGrid /> - Layout & Warnings', () => {
-  const { clock, render } = createRenderer({ clock: 'fake' });
+  const { clock, render } = createRenderer({ clock: 'real' });
 
   const baselineProps = {
     rows: [
@@ -59,14 +59,10 @@ describe('<DataGrid /> - Layout & Warnings', () => {
     });
 
     it('should resize the width of the columns', async () => {
-      // Using a fake clock also affects `requestAnimationFrame`.
-      // Calling clock.tick() should call the callback passed, but it doesn't work.
-      stub(window, 'requestAnimationFrame').callsFake((fn: any) => fn());
-      stub(window, 'cancelAnimationFrame');
-
       interface TestCaseProps {
         width?: number;
       }
+
       const TestCase = (props: TestCaseProps) => {
         const { width = 300 } = props;
         return (
@@ -87,9 +83,6 @@ describe('<DataGrid /> - Layout & Warnings', () => {
         rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect();
         expect(rect.width).to.equal(400 - 2);
       });
-
-      (window.requestAnimationFrame as SinonStub).restore();
-      (window.cancelAnimationFrame as SinonStub).restore();
     });
 
     // Adaptation of describeConformance()
@@ -203,6 +196,8 @@ describe('<DataGrid /> - Layout & Warnings', () => {
     });
 
     describe('warnings', () => {
+      clock.withFakeTimers();
+
       it('should error if the container has no intrinsic height', () => {
         expect(() => {
           render(
@@ -257,6 +252,8 @@ describe('<DataGrid /> - Layout & Warnings', () => {
     });
 
     describe('swallow warnings', () => {
+      clock.withFakeTimers();
+
       beforeEach(() => {
         stub(console, 'error');
       });