[DataGrid] Fix dimensions lag issue after autosize (#13587)

mui · Jun 25, 2024 · 3d1a39e · 3d1a39e
1 parent d5c1aa0
commit 3d1a39e
Showing 1 changed file with 15 additions and 15 deletions.
diff --git a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
@@ -86,6 +86,7 @@ export function useGridDimensions(
   const logger = useGridLogger(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(EMPTY_SIZE);
+  const dimensionsState = useGridSelector(apiRef, gridDimensionsSelector);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
@@ -302,26 +303,25 @@ export function useGridDimensions(
   }, [apiRef, savedSize, updateDimensions]);
 
   const root = apiRef.current.rootElementRef.current;
-  const dimensions = apiRef.current.state.dimensions;
   useEnhancedEffect(() => {
     if (!root) {
       return;
     }
     const set = (k: string, v: string) => root.style.setProperty(k, v);
-    set('--DataGrid-width', `${dimensions.viewportOuterSize.width}px`);
-    set('--DataGrid-hasScrollX', `${Number(dimensions.hasScrollX)}`);
-    set('--DataGrid-hasScrollY', `${Number(dimensions.hasScrollY)}`);
-    set('--DataGrid-scrollbarSize', `${dimensions.scrollbarSize}px`);
-    set('--DataGrid-rowWidth', `${dimensions.rowWidth}px`);
-    set('--DataGrid-columnsTotalWidth', `${dimensions.columnsTotalWidth}px`);
-    set('--DataGrid-leftPinnedWidth', `${dimensions.leftPinnedWidth}px`);
-    set('--DataGrid-rightPinnedWidth', `${dimensions.rightPinnedWidth}px`);
-    set('--DataGrid-headerHeight', `${dimensions.headerHeight}px`);
-    set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
-    set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
-    set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
-    set('--height', `${dimensions.rowHeight}px`);
-  }, [root, dimensions]);
+    set('--DataGrid-width', `${dimensionsState.viewportOuterSize.width}px`);
+    set('--DataGrid-hasScrollX', `${Number(dimensionsState.hasScrollX)}`);
+    set('--DataGrid-hasScrollY', `${Number(dimensionsState.hasScrollY)}`);
+    set('--DataGrid-scrollbarSize', `${dimensionsState.scrollbarSize}px`);
+    set('--DataGrid-rowWidth', `${dimensionsState.rowWidth}px`);
+    set('--DataGrid-columnsTotalWidth', `${dimensionsState.columnsTotalWidth}px`);
+    set('--DataGrid-leftPinnedWidth', `${dimensionsState.leftPinnedWidth}px`);
+    set('--DataGrid-rightPinnedWidth', `${dimensionsState.rightPinnedWidth}px`);
+    set('--DataGrid-headerHeight', `${dimensionsState.headerHeight}px`);
+    set('--DataGrid-headersTotalHeight', `${dimensionsState.headersTotalHeight}px`);
+    set('--DataGrid-topContainerHeight', `${dimensionsState.topContainerHeight}px`);
+    set('--DataGrid-bottomContainerHeight', `${dimensionsState.bottomContainerHeight}px`);
+    set('--height', `${dimensionsState.rowHeight}px`);
+  }, [root, dimensionsState]);
 
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback<GridEventListener<'resize'>>(