diff --git a/js-packages/search-frontend/src/components/ResultListPagination.tsx b/js-packages/search-frontend/src/components/ResultListPagination.tsx index c813f0ac0..1928aa150 100644 --- a/js-packages/search-frontend/src/components/ResultListPagination.tsx +++ b/js-packages/search-frontend/src/components/ResultListPagination.tsx @@ -38,6 +38,7 @@ type ResultsProps = { pagination: number; currentPage: number; setCurrentPage: React.Dispatch>; + anchor?: React.MutableRefObject; }; function ResultsPagination({ displayMode, @@ -56,6 +57,7 @@ function ResultsPagination({ pagination, currentPage, setCurrentPage, + anchor, }: ResultsProps) { const renderers = useRenderers(); @@ -86,6 +88,7 @@ function ResultsPagination({ changePage={changePage} elementForPage={pagination} setCurrentPage={setCurrentPage} + anchor={anchor} /> ); } @@ -196,6 +199,7 @@ type InfiniteResultsProps = ResulListProps & { elementForPage: number; changePage: (page: number) => void; setCurrentPage: React.Dispatch>; + anchor?: React.MutableRefObject; }; export function InfiniteResults({ renderers, @@ -215,6 +219,7 @@ export function InfiniteResults({ changePage, elementForPage, setCurrentPage, + anchor, }: InfiniteResultsProps) { const result = currentPage * elementForPage; const results = useInfiniteResults( @@ -242,11 +247,10 @@ export function InfiniteResults({ } }, [currentPage]); - const overlayRef = React.useRef(null); function scrollToOverlay() { - if (overlayRef.current) { - overlayRef.current.scrollIntoView({ + if (anchor && anchor.current) { + anchor.current.scrollIntoView({ behavior: "smooth", block: "start", }); @@ -289,7 +293,7 @@ export function InfiniteResults({ return ( -
+
{results?.data?.pages[0].total && results.data.pages[0].total > 0 ? (
, - configuration.resultListPagination, + configuration.resultListPagination + ? configuration.resultListPagination.element + : null, )} {renderPortal( diff --git a/js-packages/search-frontend/src/embeddable/entry.tsx b/js-packages/search-frontend/src/embeddable/entry.tsx index beb73f422..f8bba38b2 100644 --- a/js-packages/search-frontend/src/embeddable/entry.tsx +++ b/js-packages/search-frontend/src/embeddable/entry.tsx @@ -234,6 +234,11 @@ type FilterProps = { numberItems?: number | null | undefined; }; +type ResulListPaginationProps = { + element: Element | string | null; + anchor?: React.MutableRefObject; +} + export type Configuration = { enabled: boolean; search: Element | string | null; @@ -253,7 +258,7 @@ export type Configuration = { filtersHorizontal: FiltersHorizontalConfiguration | null; sortable: Element | string | null; results: Element | string | null; - resultListPagination: Element | string | null; + resultListPagination: ResulListPaginationProps | null; details: Element | string | null; calendar: Element | string | null; login: Element | string | null;