[DataGridPro] Fix row order being reset after updating the row (#6544)

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 // @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, createEvent } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, createEvent, act } from '@mui/monorepo/test/utils';
 import { getCell, getRowsFieldContent } from 'test/utils/helperFn';
 import { useGridApiRef, DataGridPro, gridClasses, GridApi } from '@mui/x-data-grid-pro';
 import { useBasicDemoData } from '@mui/x-data-grid-generator';
@@ -203,4 +203,43 @@ describe('<DataGridPro /> - Row reorder', () => {
     expect(handleDragOver.callCount).to.equal(0);
     expect(handleDragEnd.callCount).to.equal(0);
   });
+
+  // See https://github.com/mui/mui-x/issues/6520
+  it('should keep the order after updating a row', () => {
+    let apiRef: React.MutableRefObject<GridApi>;
+    const Test = () => {
+      apiRef = useGridApiRef();
+      const rows = [
+        { id: 0, brand: 'Nike' },
+        { id: 1, brand: 'Adidas' },
+        { id: 2, brand: 'Puma' },
+      ];
+      const columns = [{ field: 'brand' }];
+
+      return (
+        <div style={{ width: 300, height: 300 }}>
+          <DataGridPro apiRef={apiRef} rows={rows} columns={columns} rowReordering />
+        </div>
+      );
+    };
+
+    render(<Test />);
+
+    expect(getRowsFieldContent('brand')).to.deep.equal(['Nike', 'Adidas', 'Puma']);
+
+    const rowReorderCell = getCell(0, 0).firstChild!;
+    const targetCell = getCell(1, 0)!;
+    fireEvent.dragStart(rowReorderCell);
+    fireEvent.dragEnter(targetCell);
+    const dragOverEvent = createDragOverEvent(targetCell);
+    fireEvent(targetCell, dragOverEvent);
+    const dragEndEvent = createDragEndEvent(rowReorderCell);
+    fireEvent(rowReorderCell, dragEndEvent);
+
+    expect(getRowsFieldContent('brand')).to.deep.equal(['Adidas', 'Nike', 'Puma']);
+
+    act(() => apiRef.current.updateRows([{ id: 0, brand: 'New Nike' }]));
+
+    expect(getRowsFieldContent('brand')).to.deep.equal(['Adidas', 'New Nike', 'Puma']);
+  });
 });

packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts

@@ -332,6 +332,7 @@ export const useGridRows = (
           ids: updatedRows,
         },
       }));
+      apiRef.current.unstable_caches.rows.ids = updatedRows;
       apiRef.current.publishEvent('rowsSet');
     },
     [apiRef, logger],