From c84fe95f196c9026f1293023c5c6e7d105e11d82 Mon Sep 17 00:00:00 2001
From: "N.Alivernini" <nalivernini@keybiz.it>
Date: Fri, 6 Oct 2023 18:10:13 +0200
Subject: [PATCH] fix scroll top change pagination

---
 .../src/components/ResultListPagination.tsx          | 12 ++++++++----
 js-packages/search-frontend/src/embeddable/Main.tsx  |  5 ++++-
 js-packages/search-frontend/src/embeddable/entry.tsx |  7 ++++++-
 3 files changed, 18 insertions(+), 6 deletions(-)

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<E> = {
   pagination: number;
   currentPage: number;
   setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  anchor?: React.MutableRefObject<HTMLDivElement | null>;
 };
 function ResultsPagination<E>({
   displayMode,
@@ -56,6 +57,7 @@ function ResultsPagination<E>({
   pagination,
   currentPage,
   setCurrentPage,
+  anchor,
 }: ResultsProps<E>) {
   const renderers = useRenderers();
 
@@ -86,6 +88,7 @@ function ResultsPagination<E>({
           changePage={changePage}
           elementForPage={pagination}
           setCurrentPage={setCurrentPage}
+          anchor={anchor}
         />
       );
   }
@@ -196,6 +199,7 @@ type InfiniteResultsProps<E> = ResulListProps<E> & {
   elementForPage: number;
   changePage: (page: number) => void;
   setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  anchor?: React.MutableRefObject<HTMLDivElement | null>;
 };
 export function InfiniteResults<E>({
   renderers,
@@ -215,6 +219,7 @@ export function InfiniteResults<E>({
   changePage,
   elementForPage,
   setCurrentPage,
+  anchor,
 }: InfiniteResultsProps<E>) {
   const result = currentPage * elementForPage;
   const results = useInfiniteResults<E>(
@@ -242,11 +247,10 @@ export function InfiniteResults<E>({
     }
   }, [currentPage]);
 
-  const overlayRef = React.useRef<HTMLDivElement | null>(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<E>({
 
   return (
     <React.Fragment>
-      <div ref={overlayRef} style={{ overflowX: "hidden" }} className="scroll">
+      <div style={{ overflowX: "hidden" }} className="scroll">
         {results?.data?.pages[0].total && results.data.pages[0].total > 0 ? (
           <div
             className="openk9-infinite-results-container-wrapper"
diff --git a/js-packages/search-frontend/src/embeddable/Main.tsx b/js-packages/search-frontend/src/embeddable/Main.tsx
index fbbecf08a..76365dfd0 100644
--- a/js-packages/search-frontend/src/embeddable/Main.tsx
+++ b/js-packages/search-frontend/src/embeddable/Main.tsx
@@ -350,9 +350,12 @@ export function Main({
             pagination={numberOfResults}
             currentPage={currentPage}
             setCurrentPage={setCurrentPage}
+            anchor={configuration.resultListPagination?.anchor}
           />
         </I18nextProvider>,
-        configuration.resultListPagination,
+        configuration.resultListPagination
+        ? configuration.resultListPagination.element
+        : null,
       )}
       {renderPortal(
         <I18nextProvider i18n={i18next}>
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<HTMLDivElement | null>;
+}
+
 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;