fix(pagination): cursor position when hidden on init

.changeset/tidy-parents-cheat.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/pagination": patch
+---
+
+fix pagination cursor position on first load

packages/components/pagination/__tests__/pagination.test.tsx

@@ -79,4 +79,74 @@ describe("Pagination", () => {
 
     expect(cursor).toHaveAttribute("aria-hidden", "true");
   });
+
+  it("the pagination cursor should not have data-moving attribute before intersection", () => {
+    // save callback and options to later emulate intersection event
+    let intersectCallback: IntersectionObserverCallback | undefined;
+    let intersectOptions: IntersectionObserverInit | undefined;
+
+    // defined here as we need the closure
+    class MockIntersectionObserver implements IntersectionObserver {
+      root: Element | null = null;
+      rootMargin: string = "";
+      thresholds: number[] = [];
+      disconnect: () => void = () => {};
+      observe: (target: Element) => void = () => {};
+      unobserve: (target: Element) => void = () => {};
+      takeRecords: () => IntersectionObserverEntry[] = () => [];
+
+      constructor(
+        private readonly callback: IntersectionObserverCallback,
+        private readonly options?: IntersectionObserverInit,
+      ) {
+        this.root = (this.options?.root ?? null) as Element | null;
+        this.rootMargin = this.options?.rootMargin ?? "";
+        this.thresholds = Array.isArray(this.options?.threshold)
+          ? this.options.threshold
+          : this.options?.threshold != null
+          ? [this.options.threshold]
+          : [0];
+        this.disconnect = jest.fn();
+        this.observe = jest.fn();
+        this.unobserve = jest.fn();
+        this.takeRecords = jest.fn();
+
+        // save to closure
+        intersectCallback = this.callback;
+        intersectOptions = this.options;
+      }
+    }
+
+    // hijack the IntersectionObserver implementation so useIntersectionObserver returns our mock
+    window.IntersectionObserver = MockIntersectionObserver;
+
+    const {container, rerender} = render(<Pagination total={10} />);
+
+    const cursor = container.querySelector("span[data-slot='cursor']");
+
+    // on first render, the cursor should not have the data-moving attribute until the observer is triggered
+    expect(cursor).not.toHaveAttribute("data-moving");
+
+    // trigger the observer with a full intersection
+    intersectCallback?.(
+      [
+        {
+          isIntersecting: true,
+          intersectionRatio: 1,
+          target: container,
+          boundingClientRect: {} as DOMRectReadOnly,
+          intersectionRect: {} as DOMRectReadOnly,
+          rootBounds: {} as DOMRectReadOnly,
+          time: 0,
+        },
+      ],
+      new MockIntersectionObserver(intersectCallback, intersectOptions),
+    );
+
+    // rerender the component to update cursor state after intersection
+    rerender(<Pagination total={10} />);
+
+    // on rerender, the cursor should have the data-moving attribute
+    expect(cursor).toHaveAttribute("data-moving");
+  });
 });

packages/components/pagination/package.json

@@ -43,6 +43,7 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
+    "@nextui-org/use-intersection-observer": "workspace:*",
     "@nextui-org/use-pagination": "workspace:*",
     "@react-aria/focus": "3.18.4",
     "@react-aria/i18n": "3.12.3",

packages/components/pagination/src/use-pagination.ts

@@ -17,6 +17,7 @@ import {pagination} from "@nextui-org/theme";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {PressEvent} from "@react-types/shared";
+import {useIntersectionObserver} from "@nextui-org/use-intersection-observer";
 
 export type PaginationItemRenderProps = {
   /**
@@ -278,17 +279,27 @@ export function usePagination(originalProps: UsePaginationProps) {
     onChange,
   });
 
+  // check if the pagination component is visible
+  const [setRef, isVisible] = useIntersectionObserver();
+
+  useEffect(() => {
+    setRef(domRef.current);
+  }, [domRef.current]);
+
   const activePageRef = useRef(activePage);
 
   useEffect(() => {
-    if (activePage && !disableAnimation) {
+    // when the pagination component is invisible, scroll offset will be wrong
+    // thus, only scroll to the active page if the pagination component is visible
+    if (activePage && !disableAnimation && isVisible) {
       scrollTo(activePage, activePage === activePageRef.current);
     }
     activePageRef.current = activePage;
   }, [
     activePage,
     disableAnimation,
     disableCursorAnimation,
+    isVisible,
     originalProps.dotsJump,
     originalProps.isCompact,
     originalProps.showControls,