From 21c173edd70727f471169a297c291f5a8ddc41a0 Mon Sep 17 00:00:00 2001
From: Jon Kafton <939376+jonkafton@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:27:02 +0200
Subject: [PATCH 1/5] Scroll into view on paginate

---
 .../SearchDisplay/SearchDisplay.tsx                | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
index a8822f3506..958c43dc8c 100644
--- a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
+++ b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import React, { useMemo, useRef } from "react"
 import {
   styled,
   Pagination,
@@ -503,6 +503,7 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
   setSearchParams,
 }) => {
   const [searchParams] = useSearchParams()
+  const scrollHook = useRef<HTMLInputElement>(null)
   const activeTab =
     TABS.find((t) => t.name === searchParams.get("tab")) ??
     TABS.find((t) => t.defaultTab) ??
@@ -569,6 +570,7 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
 
   return (
     <Container>
+      <div ref={scrollHook} />
       <StyledGridContainer>
         <ResourceTypeTabs.Context activeTabName={activeTab.name}>
           <DesktopFiltersColumn
@@ -680,7 +682,15 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
                 <Pagination
                   count={getLastPage(data?.count ?? 0)}
                   page={page}
-                  onChange={(_, newPage) => setPage(newPage)}
+                  onChange={(_, newPage) => {
+                    setPage(newPage)
+                    setTimeout(() => {
+                      scrollHook.current?.scrollIntoView({
+                        block: "end",
+                        behavior: "smooth",
+                      })
+                    }, 0)
+                  }}
                   renderItem={(item) => (
                     <PaginationItem
                       slots={{

From 541857722320e51495e5499c358149125467bd22 Mon Sep 17 00:00:00 2001
From: Jon Kafton <939376+jonkafton@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:30:29 +0200
Subject: [PATCH 2/5] Scroll top of results to center page

---
 .../src/page-components/SearchDisplay/SearchDisplay.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
index 958c43dc8c..2a8dbd3bd4 100644
--- a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
+++ b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
@@ -686,7 +686,7 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
                     setPage(newPage)
                     setTimeout(() => {
                       scrollHook.current?.scrollIntoView({
-                        block: "end",
+                        block: "center",
                         behavior: "smooth",
                       })
                     }, 0)

From ef27a3e85129fd7f08afe919042bc6bf7582aad9 Mon Sep 17 00:00:00 2001
From: Jon Kafton <939376+jonkafton@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:33:48 +0200
Subject: [PATCH 3/5] Move scroll hook to top of results

---
 .../src/page-components/SearchDisplay/SearchDisplay.tsx        | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
index 2a8dbd3bd4..590c54a558 100644
--- a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
+++ b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
@@ -570,7 +570,6 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
 
   return (
     <Container>
-      <div ref={scrollHook} />
       <StyledGridContainer>
         <ResourceTypeTabs.Context activeTabName={activeTab.name}>
           <DesktopFiltersColumn
@@ -652,8 +651,8 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
                 </StyledDrawer>
                 <MobileSortContainer>{sortDropdown}</MobileSortContainer>
               </MobileFilter>
-
               <StyledResultsContainer>
+                <div ref={scrollHook} />
                 {isLoading ? (
                   <PlainList itemSpacing={1.5}>
                     {Array(PAGE_SIZE)

From 937b3229f493d1c447a8dc222c66454962b7f7b5 Mon Sep 17 00:00:00 2001
From: Jon Kafton <939376+jonkafton@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:53:24 +0200
Subject: [PATCH 4/5] Provide scrollIntoView function for tests

---
 frontends/jest-shared-setup.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontends/jest-shared-setup.ts b/frontends/jest-shared-setup.ts
index 4c77acf745..aa53284fc4 100644
--- a/frontends/jest-shared-setup.ts
+++ b/frontends/jest-shared-setup.ts
@@ -23,6 +23,8 @@ Object.defineProperty(window, "matchMedia", {
   })),
 })
 
+Element.prototype.scrollIntoView = jest.fn()
+
 /*
  * This used to live in ol-ckeditor but we also need it now for NukaCarousel,
  * so it's now here so it's available across the board.

From 2d5f8636b60b38b1afa46ac57f07ff2395b8a668 Mon Sep 17 00:00:00 2001
From: Jon Kafton <939376+jonkafton@users.noreply.github.com>
Date: Fri, 28 Jun 2024 18:55:22 +0200
Subject: [PATCH 5/5] Correct ref type

---
 .../src/page-components/SearchDisplay/SearchDisplay.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
index 590c54a558..94ea6772bc 100644
--- a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
+++ b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
@@ -503,7 +503,7 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
   setSearchParams,
 }) => {
   const [searchParams] = useSearchParams()
-  const scrollHook = useRef<HTMLInputElement>(null)
+  const scrollHook = useRef<HTMLDivElement>(null)
   const activeTab =
     TABS.find((t) => t.name === searchParams.get("tab")) ??
     TABS.find((t) => t.defaultTab) ??