[DataGrid] Wait for rows before reacting on autosizeOnMount (#22698)

MBilalShafi · web-flow · commit 909c7025513f · 2026-06-18T14:26:17.000Z
diff --git a/docs/data/data-grid/column-dimensions/column-dimensions.md b/docs/data/data-grid/column-dimensions/column-dimensions.md
@@ -124,6 +124,8 @@ This example uses `ReactDOM.flushSync`. If used incorrectly it can hurt the perf
 
 ### Autosizing virtualized columns
 
+Autosizing measures the cells currently rendered in the DOM. When row virtualization is enabled and the rows do not all fit in the viewport, cells from off-screen rows are not measured.
+
 Use `autoSizeColumns({ disableColumnVirtualization: true})` to include columns that are not visible in the DOM due to column virtualization.
 
 :::warning
diff --git a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
@@ -1,3 +1,5 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import { type RefObject } from '@mui/x-internals/types';
@@ -10,6 +12,7 @@ import {
   gridColumnFieldsSelector,
   type GridApi,
   type GridAutosizeOptions,
+  type GridColDef,
 } from '@mui/x-data-grid-pro';
 import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
 import { getColumnHeaderCell, getCell, getRow } from 'test/utils/helperFn';
@@ -635,6 +638,63 @@ describe('<DataGridPro /> - Columns', () => {
       });
     });
 
+    // Regression test for https://github.com/mui/mui-x/issues/22505
+    it('should wait for all rows to be rendered on mount when rows fit the viewport', async () => {
+      const shortValue = 'Nike';
+      const wideValue = 'Lululemon Athletica International Collection';
+
+      function DeferredCellContent({ value }: { value: string }) {
+        const [showValue, setShowValue] = React.useState(value === shortValue);
+
+        React.useEffect(() => {
+          if (!showValue) {
+            // Hack to make the test fail similar to https://github.com/mui/mui-x/issues/22505
+            // in our test env. We reveal the wide value a couple of microtasks after mount, so
+            // that the unfixed code (which autosizes on the first microtask) misses it. The
+            // commit is flushed synchronously so the wide value is reliably in the DOM before
+            // the autosize `requestAnimationFrame` fires, regardless of the React version's
+            // scheduler (a plain `setState` here is committed after the frame on React 18).
+            Promise.resolve().then(() => {
+              Promise.resolve().then(() => ReactDOM.flushSync(() => setShowValue(true)));
+            });
+          }
+        }, [showValue]);
+
+        return <span>{showValue ? value : shortValue}</span>;
+      }
+
+      const autosizeRows = [
+        { id: 0, brand: 'Nike' },
+        { id: 1, brand: 'Adidas' },
+        { id: 2, brand: 'Puma' },
+        { id: 3, brand: 'Reebok' },
+        { id: 4, brand: 'Asics' },
+        { id: 5, brand: 'New Balance' },
+        { id: 6, brand: wideValue },
+      ];
+      const autosizeColumns: GridColDef[] = [
+        {
+          field: 'brand',
+          renderCell: ({ value }) => <DeferredCellContent value={value} />,
+        },
+      ];
+
+      render(
+        <Test
+          rows={autosizeRows}
+          columns={autosizeColumns}
+          autosizeOnMount
+          autosizeOptions={{ columns: ['brand'], includeOutliers: true }}
+        />,
+      );
+
+      await waitFor(() => {
+        const wideCell = getCell(6, 0);
+        expect(wideCell.textContent).to.equal(wideValue);
+        expect(wideCell.scrollWidth).to.be.at.most(wideCell.clientWidth);
+      });
+    });
+
     it('should work with flex columns', async () => {
       const { user } = render(
         <Test
diff --git a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -39,7 +39,10 @@ import {
   useGridSelector,
   useOnMount,
 } from '../../utils';
-import { gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import {
+  gridRenderContextSelector,
+  gridVirtualizationColumnEnabledSelector,
+} from '../virtualization';
 import {
   type ControllablePromise,
   createControllablePromise,
@@ -51,6 +54,7 @@ import { GridPinnedColumnPosition } from '../columns/gridColumnsInterfaces';
 import { gridColumnsStateSelector } from '../columns';
 import { gridDimensionsSelector } from '../dimensions';
 import { gridHeaderFilteringEnabledSelector } from '../headerFiltering';
+import { gridVisibleRowsSelector } from '../pagination';
 import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import type { GridColumnResizeParams } from '../../../models/params/gridColumnResizeParams';
 import type { GridStateColDef } from '../../../models/colDef/gridColDef';
@@ -62,6 +66,30 @@ type AutosizeOptionsRequired = Required<GridAutosizeOptions>;
 
 type ResizeDirection = keyof typeof GridColumnHeaderSeparatorSides;
 
+function isRenderContextReadyForAutosizeOnMount(apiRef: RefObject<GridPrivateApiCommunity>) {
+  const dimensions = gridDimensionsSelector(apiRef);
+  if (!dimensions.isReady) {
+    return false;
+  }
+
+  const { rows } = gridVisibleRowsSelector(apiRef);
+  if (rows.length === 0) {
+    return true;
+  }
+
+  const renderContext = gridRenderContextSelector(apiRef);
+  if (renderContext.lastRowIndex <= renderContext.firstRowIndex) {
+    return false;
+  }
+
+  // If all rows fit in the viewport, wait for them all; otherwise we can only measure the rendered rows.
+  if (!dimensions.hasScrollY) {
+    return renderContext.firstRowIndex === 0 && renderContext.lastRowIndex >= rows.length;
+  }
+
+  return true;
+}
+
 function trackFinger(event: any, currentTouchId: number | undefined): CursorCoordinates | boolean {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -851,10 +879,52 @@ export const useGridColumnResize = (
 
   useOnMount(() => {
     if (props.autosizeOnMount) {
-      Promise.resolve().then(() => {
+      let frameHandle: number | undefined;
+      let unsubscribeStateChange: (() => void) | undefined;
+      let unsubscribeRenderedRowsIntervalChange: (() => void) | undefined;
+
+      const cleanupListeners = () => {
+        unsubscribeStateChange?.();
+        unsubscribeRenderedRowsIntervalChange?.();
+        unsubscribeStateChange = undefined;
+        unsubscribeRenderedRowsIntervalChange = undefined;
+      };
+
+      const runAutosize = () => {
+        frameHandle = undefined;
+        cleanupListeners();
         apiRef.current.autosizeColumns(props.autosizeOptions);
-      });
+      };
+
+      const scheduleAutosize = () => {
+        if (frameHandle === undefined) {
+          frameHandle = requestAnimationFrame(runAutosize);
+        }
+      };
+
+      const checkRenderContext = () => {
+        if (isRenderContextReadyForAutosizeOnMount(apiRef)) {
+          scheduleAutosize();
+        }
+      };
+
+      unsubscribeStateChange = apiRef.current.subscribeEvent('stateChange', checkRenderContext);
+      unsubscribeRenderedRowsIntervalChange = apiRef.current.subscribeEvent(
+        'renderedRowsIntervalChange',
+        checkRenderContext,
+      );
+
+      checkRenderContext();
+
+      return () => {
+        cleanupListeners();
+        if (frameHandle !== undefined) {
+          cancelAnimationFrame(frameHandle);
+        }
+      };
     }
+
+    return undefined;
   });
 
   useGridNativeEventListener(
