[ReviewEntries] Scroll-to-top after changing rows-per-page (#2713)

sillsdev · Oct 16, 2023 · 5494338 · 5494338
1 parent 59e73ea
commit 5494338
Showing 1 changed file with 11 additions and 0 deletions.
diff --git 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) => {