diff --git a/src/goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTable.tsx b/src/goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTable.tsx index e9fa1a07cf..674eed105a 100644 --- a/src/goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTable.tsx +++ b/src/goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTable.tsx @@ -58,6 +58,7 @@ export default function ReviewEntriesTable( const { t } = useTranslation(); const [maxRows, setMaxRows] = useState(words.length); const [pageState, setPageState] = useState(getPageState(words.length)); + const [scrollToTop, setScrollToTop] = useState(false); const updateMaxRows = (): void => { if (tableRef.current) { @@ -79,6 +80,15 @@ export default function ReviewEntriesTable( }); }, [maxRows, setPageState]); + useEffect(() => { + // onRowsPerPageChange={() => window.scrollTo({ top: 0 })} doesn't work. + // This useEffect on an intermediate state triggers scrolling at the right time. + if (scrollToTop) { + window.scrollTo({ behavior: "smooth", top: 0 }); + setScrollToTop(false); + } + }, [scrollToTop]); + const materialTableLocalization = { body: { editRow: { @@ -136,6 +146,7 @@ export default function ReviewEntriesTable( )} data={words} onFilterChange={updateMaxRows} + onRowsPerPageChange={() => setScrollToTop(true)} editable={{ onRowUpdate: (newData: ReviewEntriesWord, oldData: ReviewEntriesWord) => new Promise(async (resolve, reject) => {