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); });