diff --git a/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts b/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts
index 26025d6a5daff..9ae90b76163a0 100644
--- a/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts
+++ b/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);
/**
diff --git a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
index 79ba4e9ffde3b..f521905aeb121 100644
--- a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
@@ -609,7 +609,7 @@ describe(' - 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(
- 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(' - 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(' - 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);
});