[DataGrid] Wait for external model updates before resetting pagination after sort/filter (#20162)

Author: arminmeh

packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts

@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import debounce from '@mui/utils/debounce';
 import { RefObject } from '@mui/x-internals/types';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
@@ -276,6 +277,11 @@ export const useGridPaginationModel = (
     }
   }, [apiRef]);
 
+  const debouncedNavigateToStart = React.useMemo(
+    () => debounce(navigateToStart, 0),
+    [navigateToStart],
+  );
+
   /**
    * Resets the page only if the active items or quick filter has changed from the last time.
    * This is to avoid resetting the page when the filter model is changed
@@ -295,15 +301,15 @@ export const useGridPaginationModel = (
       }
 
       previousFilterModel.current = currentActiveFilters;
-      navigateToStart();
+      debouncedNavigateToStart();
     },
-    [apiRef, navigateToStart],
+    [apiRef, debouncedNavigateToStart],
   );
 
   useGridEvent(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
   useGridEvent(apiRef, 'paginationModelChange', handlePaginationModelChange);
   useGridEvent(apiRef, 'rowCountChange', handleRowCountChange);
-  useGridEvent(apiRef, 'sortModelChange', navigateToStart);
+  useGridEvent(apiRef, 'sortModelChange', debouncedNavigateToStart);
   useGridEvent(apiRef, 'filterModelChange', handleFilterModelChange);
 
   /**

packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx

@@ -609,7 +609,7 @@ describe('<DataGrid /> - Pagination', () => {
     });
   });
 
-  it('should reset page to 0 and scroll to top if sort or filter is applied', () => {
+  it('should reset page to 0 and scroll to top if sort or filter is applied', async () => {
     render(
       <BaselineTestCase
         initialState={{ pagination: { paginationModel: { page: 0, pageSize: 50 }, rowCount: 0 } }}
@@ -630,7 +630,9 @@ describe('<DataGrid /> - Pagination', () => {
       apiRef.current!.sortColumn('id', 'asc');
     });
     // page is reset to 0 after sorting
-    expect(apiRef.current!.state.pagination.paginationModel.page).to.equal(0);
+    await waitFor(() => {
+      expect(apiRef.current!.state.pagination.paginationModel.page).to.equal(0);
+    });
     expect(apiRef.current!.getScrollPosition().top).to.equal(0);
 
     // scroll but stay on the same page
@@ -642,7 +644,9 @@ describe('<DataGrid /> - Pagination', () => {
     act(() => {
       apiRef.current!.sortColumn('id', 'desc');
     });
-    expect(apiRef.current!.getScrollPosition().top).to.equal(0);
+    await waitFor(() => {
+      expect(apiRef.current!.getScrollPosition().top).to.equal(0);
+    });
 
     // move to the next page again and scroll
     act(() => {
@@ -664,7 +668,9 @@ describe('<DataGrid /> - Pagination', () => {
     });
 
     // page and scroll position are reset filtering
-    expect(apiRef.current!.state.pagination.paginationModel.page).to.equal(0);
+    await waitFor(() => {
+      expect(apiRef.current!.state.pagination.paginationModel.page).to.equal(0);
+    });
     expect(apiRef.current!.getScrollPosition().top).to.equal(0);
   });