fix scroll top change pagination

smclab · Oct 6, 2023 · c84fe95 · c84fe95
1 parent 1f3f6c0
commit c84fe95
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;