[DataGridPro] Fix onColumnWidthChange being called twice on autosize

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

@@ -284,6 +284,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[]>([]);
@@ -378,6 +379,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(
@@ -610,6 +629,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);
 
@@ -702,6 +723,17 @@ 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;

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

@@ -150,6 +150,25 @@ 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.equal(2);
+      expect(onColumnWidthChange.args[1][0].width).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', () => {
       render(
         <Test