column resize event trigger after dom update

mui · Feb 26, 2024 · 0e5732d · 0e5732d
1 parent ce71551
commit 0e5732d
Showing 1 changed file with 14 additions and 11 deletions.
diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -667,6 +667,20 @@ export const useGridColumnResize = (
 
   const columnVirtualizationDisabled = useColumnVirtualizationDisabled(apiRef);
   const isAutosizingRef = React.useRef(false);
+
+  React.useEffect(() => {
+    if (colDefRef.current && !isAutosizingRef.current) {
+      const columnsState = gridColumnsStateSelector(apiRef.current.state);
+      const column: GridStateColDef = columnsState.lookup[colDefRef.current.field];
+      const width: number = column.width as number;
+      apiRef.current.publishEvent('columnWidthChange', {
+        element: apiRef.current.getColumnHeaderElement(colDefRef.current.field),
+        colDef: { ...colDefRef.current, width },
+        width,
+      });
+    }
+  }, [isAutosizingRef.current]);
+
   const autosizeColumns = React.useCallback<GridColumnResizeApi['autosizeColumns']>(
     async (userOptions) => {
       const root = apiRef.current.rootElementRef?.current;
@@ -723,17 +737,6 @@ export const useGridColumnResize = (
         }
 
         apiRef.current.updateColumns(newColumns);
-
-        if (colDefRef.current) {
-          const columnsState = gridColumnsStateSelector(apiRef.current.state);
-          const column: GridStateColDef = columnsState.lookup[colDefRef.current.field];
-          const width: number = column.width as number;
-          apiRef.current.publishEvent('columnWidthChange', {
-            element: apiRef.current.getColumnHeaderElement(colDefRef.current.field),
-            colDef: { ...colDefRef.current, width },
-            width,
-          });
-        }
       } finally {
         apiRef.current.unstable_setColumnVirtualization(true);
         isAutosizingRef.current = false;