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. diff --git a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx index a8822f3506..94ea6772bc 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 = ({ setSearchParams, }) => { const [searchParams] = useSearchParams() + const scrollHook = useRef(null) const activeTab = TABS.find((t) => t.name === searchParams.get("tab")) ?? TABS.find((t) => t.defaultTab) ?? @@ -650,8 +651,8 @@ const SearchDisplay: React.FC = ({ {sortDropdown} - +
{isLoading ? ( {Array(PAGE_SIZE) @@ -680,7 +681,15 @@ const SearchDisplay: React.FC = ({ setPage(newPage)} + onChange={(_, newPage) => { + setPage(newPage) + setTimeout(() => { + scrollHook.current?.scrollIntoView({ + block: "center", + behavior: "smooth", + }) + }, 0) + }} renderItem={(item) => (