column resize event trigger after dom update

mui · Feb 26, 2024 · 4bcd99b · 4bcd99b
1 parent ce71551
commit 4bcd99b
Show file tree

Hide file tree

Showing 2 changed files with 17 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,21 @@ 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,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAutosizingRef.current, apiRef]);
+
   const autosizeColumns = React.useCallback<GridColumnResizeApi['autosizeColumns']>(
     async (userOptions) => {
       const root = apiRef.current.rootElementRef?.current;
@@ -723,17 +738,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;

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
@@ -166,6 +166,8 @@ describe('<DataGridPro /> - Columns', () => {
       await microtasks();
       expect(onColumnWidthChange.callCount).to.equal(2);
       expect(onColumnWidthChange.args[1][0].width).to.equal(116);
+      expect(onColumnWidthChange.args[1][0].element.clientWidth).to.equal(116);
+      expect(onColumnWidthChange.args[1][0].colDef.width).to.equal(116);
     });
 
     it('should not affect other cell elements that are not part of the main DataGrid instance', () => {