From 54943386b159d205b0f0e0585df26022c8282617 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Mon, 16 Oct 2023 16:22:58 -0400
Subject: [PATCH] [ReviewEntries] Scroll-to-top after changing rows-per-page
 (#2713)

---
 .../ReviewEntriesComponent/ReviewEntriesTable.tsx     | 11 +++++++++++
 1 file changed, 11 insertions(+)

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) => {