[data grid] fix onColumnWidthChange called before autosize affects co…

…lumn width (#12140)

packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx

@@ -281,6 +281,7 @@ export const useGridColumnResize = (
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
 
   const colDefRef = React.useRef<GridStateColDef>();
+  const previousMouseClickEvent = React.useRef<MouseEvent>();
   const columnHeaderElementRef = React.useRef<HTMLDivElement>();
   const headerFilterElementRef = React.useRef<HTMLDivElement>();
   const groupHeaderElementsRef = React.useRef<Element[]>([]);
@@ -375,6 +376,24 @@ export const useGridColumnResize = (
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
 
+    // Prevent double-clicks from being interpreted as two separate clicks
+    if (previousMouseClickEvent.current) {
+      const prevEvent = previousMouseClickEvent.current;
+      const prevTimeStamp = prevEvent.timeStamp;
+      const prevClientX = prevEvent.clientX;
+      const prevClientY = prevEvent.clientY;
+
+      // Check if the current event is part of a double-click
+      if (
+        nativeEvent.timeStamp - prevTimeStamp < 300 &&
+        nativeEvent.clientX === prevClientX &&
+        nativeEvent.clientY === prevClientY
+      ) {
+        previousMouseClickEvent.current = undefined;
+        return;
+      }
+    }
+
     if (colDefRef.current) {
       apiRef.current.setColumnWidth(colDefRef.current.field, colDefRef.current.width!);
       logger.debug(
@@ -607,6 +626,8 @@ export const useGridColumnResize = (
       const doc = ownerDocument(apiRef.current.rootElementRef!.current);
       doc.body.style.cursor = 'col-resize';
 
+      previousMouseClickEvent.current = event.nativeEvent;
+
       doc.addEventListener('mousemove', handleResizeMouseMove);
       doc.addEventListener('mouseup', handleResizeMouseUp);
 
@@ -699,6 +720,17 @@ export const useGridColumnResize = (
         }
 
         apiRef.current.updateColumns(newColumns);
+
+        newColumns.forEach((newColumn, index) => {
+          if (newColumn.width !== columns[index].width) {
+            const width = newColumn.width;
+            apiRef.current.publishEvent('columnWidthChange', {
+              element: apiRef.current.getColumnHeaderElement(newColumn.field),
+              colDef: newColumn,
+              width,
+            });
+          }
+        });
       } finally {
         apiRef.current.unstable_setColumnVirtualization(true);
         isAutosizingRef.current = false;

packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx

@@ -150,6 +150,29 @@ describe('<DataGridPro /> - Columns', () => {
       expect(onColumnWidthChange.args[0][0].width).to.equal(120);
     });
 
+    it('should call onColumnWidthChange with correct width after resizing and then clicking the separator', async () => {
+      const onColumnWidthChange = spy();
+      render(<Test onColumnWidthChange={onColumnWidthChange} columns={columns} />);
+      const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
+      fireEvent.mouseDown(separator, { clientX: 100 });
+      fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 });
+      fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 });
+      expect(onColumnWidthChange.callCount).to.equal(0);
+      fireEvent.mouseUp(separator);
+      clock.tick(0);
+      expect(onColumnWidthChange.callCount).to.equal(1);
+      expect(onColumnWidthChange.args[0][0].width).to.equal(120);
+      fireEvent.doubleClick(separator);
+      await microtasks();
+      expect(onColumnWidthChange.callCount).to.be.at.least(2);
+      const widthArgs = onColumnWidthChange.args.map((arg) => arg[0].width);
+      const isWidth116Present = widthArgs.some((width) => width === 116);
+      expect(isWidth116Present).to.equal(true);
+      const colDefWidthArgs = onColumnWidthChange.args.map((arg) => arg[0].colDef.width);
+      const isColDefWidth116Present = colDefWidthArgs.some((width) => width === 116);
+      expect(isColDefWidth116Present).to.equal(true);
+    });
+
     it('should not affect other cell elements that are not part of the main DataGrid instance', () => {
       render(
         <Test