[DataGrid] Fire columnOrderChange event after state update

packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts

@@ -245,6 +245,10 @@ export function useGridColumns(
 
       logger.debug(`Moving column ${field} to index ${targetIndexPosition}`);
 
+      const updatedColumns = [...gridState.columns.all];
+      updatedColumns.splice(targetIndexPosition, 0, updatedColumns.splice(oldIndexPosition, 1)[0]);
+      setGridColumnsState({ ...gridState.columns, all: updatedColumns });
+
       const params: GridColumnOrderChangeParams = {
         field,
         element: apiRef.current.getColumnHeaderElement(field),
@@ -253,10 +257,6 @@ export function useGridColumns(
         oldIndex: oldIndexPosition,
       };
       apiRef.current.publishEvent(GridEvents.columnOrderChange, params);
-
-      const updatedColumns = [...gridState.columns.all];
-      updatedColumns.splice(targetIndexPosition, 0, updatedColumns.splice(oldIndexPosition, 1)[0]);
-      setGridColumnsState({ ...gridState.columns, all: updatedColumns });
     },
     [apiRef, gridState.columns, logger, setGridColumnsState],
   );

packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx

@@ -21,6 +21,8 @@ import {
   DataGridPro,
   GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS,
 } from '@mui/x-data-grid-pro';
+import { useData } from 'storybook/src/hooks/useData';
+import { spy } from 'sinon';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -225,6 +227,40 @@ describe('<DataGridPro /> - Reorder', () => {
     expect(getColumnHeadersTextContent()).to.deep.equal(['brand', 'desc', 'type']);
   });
 
+  it('onColumnOrderChange should be called after the column has been reordered', () => {
+    const onColumnOrderChange = spy();
+    let apiRef: GridApiRef;
+    const Test = () => {
+      apiRef = useGridApiRef();
+      const data = useData(1, 3);
+
+      return (
+        <div style={{ width: 300, height: 300 }}>
+          <DataGridPro apiRef={apiRef} {...data} onColumnOrderChange={onColumnOrderChange} />
+        </div>
+      );
+    };
+
+    render(<Test />);
+
+    const dragCol = getColumnHeaderCell(0).firstChild!;
+    const targetCell = getCell(0, 2)!;
+
+    fireEvent.dragStart(dragCol);
+    fireEvent.dragEnter(targetCell);
+    const dragOverEvent = createDragOverEvent(targetCell);
+    fireEvent(targetCell, dragOverEvent);
+    const dragEndEvent = createDragEndEvent(dragCol);
+    fireEvent(dragCol, dragEndEvent);
+
+    expect(onColumnOrderChange.callCount).to.equal(1);
+    expect(onColumnOrderChange.lastCall.args[2].api.state.columns.all).to.deep.equal([
+      'currencyPair',
+      'price1M',
+      'id',
+    ]);
+  });
+
   describe('column disableReorder', () => {
     it('should not allow to start dragging a column with disableReorder=true', () => {
       let apiRef: GridApiRef;