From b2fcf021f2a9f9de04eaa7b441bd848f97ef7e78 Mon Sep 17 00:00:00 2001
From: Rohit Rajan <rohit.rajan031101@gmail.com>
Date: Sun, 30 Nov 2025 22:11:01 +0530
Subject: [PATCH] fix: pagination ui

---
 src/components/browser/BrowserWindow.tsx       | 9 ++++++++-
 src/components/recorder/DOMBrowserRenderer.tsx | 7 ++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/browser/BrowserWindow.tsx b/src/components/browser/BrowserWindow.tsx
index 7dd8b2cf..769e9048 100644
--- a/src/components/browser/BrowserWindow.tsx
+++ b/src/components/browser/BrowserWindow.tsx
@@ -1686,6 +1686,12 @@ export const BrowserWindow = () => {
         }
     }, [paginationMode, resetPaginationSelector]);
 
+    useEffect(() => {
+     if (!paginationMode || !getList) {
+       setHighlighterData(null);
+     }
+    }, [paginationMode, getList]);
+
     useEffect(() => {
       if (paginationMode && currentListActionId) {
         const currentListStep = browserSteps.find(
@@ -1841,7 +1847,7 @@ export const BrowserWindow = () => {
                 >
                     {/* Individual element highlight (for non-group or hovered element) */}
                     {((getText && !listSelector) || 
-                      (getList && paginationMode && paginationType !== "" && 
+                      (getList && paginationMode && !paginationSelector && paginationType !== "" && 
                       !["none", "scrollDown", "scrollUp"].includes(paginationType))) && (
                       <div
                         style={{
@@ -1909,6 +1915,7 @@ export const BrowserWindow = () => {
                       listSelector &&
                       !paginationMode &&
                       !limitMode &&
+                      captureStage === 'initial' &&
                       highlighterData.similarElements?.rects?.map((rect, index) => (
                           <React.Fragment key={`item-${index}`}>
                             <div
diff --git a/src/components/recorder/DOMBrowserRenderer.tsx b/src/components/recorder/DOMBrowserRenderer.tsx
index 10fa4742..1e7b1e46 100644
--- a/src/components/recorder/DOMBrowserRenderer.tsx
+++ b/src/components/recorder/DOMBrowserRenderer.tsx
@@ -268,6 +268,7 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
               shouldHighlight = false;
             } else if (
               paginationMode &&
+              !paginationSelector &&
               paginationType !== "" &&
               !["none", "scrollDown", "scrollUp"].includes(paginationType)
             ) {
@@ -353,7 +354,7 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
           const options: boolean | AddEventListenerOptions = ['wheel', 'touchstart', 'touchmove'].includes(event)
             ? { passive: false }
             : false;
-           iframeDoc.removeEventListener(event, handler as EventListener, options);
+          iframeDoc.removeEventListener(event, handler as EventListener, options);
         });
       }
 
@@ -588,7 +589,7 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
             const elementRect = element.getBoundingClientRect();
             const relativeX = iframeX - elementRect.left;
             const relativeY = iframeY - elementRect.top;
-            
+
             socket.emit("dom:click", {
               selector,
               url: snapshot.baseUrl,
@@ -636,7 +637,7 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
           if (iframe) {
             const focusedElement = iframeDoc.activeElement as HTMLElement;
             let coordinates = { x: 0, y: 0 };
-            
+
             if (focusedElement && focusedElement !== iframeDoc.body) {
               // Get coordinates from the focused element
               const rect = focusedElement.getBoundingClientRect();