From 44a63a3897b507721d434e7aeb0364d723d211ac Mon Sep 17 00:00:00 2001
From: abhishekdeepmindz <abhi.gupta@deepmindz.co>
Date: Sat, 24 Aug 2024 03:09:34 +0530
Subject: [PATCH] fix: The step element does not highlight on
 scrollIntoViewOptions: { behavior: 'smooth'} #50509

---
 src/hooks/useTarget.ts | 36 ++++++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/hooks/useTarget.ts b/src/hooks/useTarget.ts
index 432c3b2..3ac058d 100644
--- a/src/hooks/useTarget.ts
+++ b/src/hooks/useTarget.ts
@@ -42,20 +42,36 @@ export default function useTarget(
   const updatePos = useEvent(() => {
     if (targetElement) {
       // Exist target element. We should scroll and get target position
+      const calculatePosition = () => {
+        const { left, top, width, height } =
+          targetElement.getBoundingClientRect();
+        const nextPosInfo: PosInfo = { left, top, width, height, radius: 0 };
+        setPosInfo(origin => {
+          if (JSON.stringify(origin) !== JSON.stringify(nextPosInfo)) {
+            return nextPosInfo;
+          }
+          return origin;
+        });
+      };
+
       if (!isInViewPort(targetElement) && open) {
         targetElement.scrollIntoView(scrollIntoViewOptions);
-      }
 
-      const { left, top, width, height } =
-        targetElement.getBoundingClientRect();
-      const nextPosInfo: PosInfo = { left, top, width, height, radius: 0 };
+        const observer = new IntersectionObserver(
+          (entries, observer) => {
+            const [entry] = entries;
+            if (entry.isIntersecting) {
+              setTimeout(() => calculatePosition(), 300); // debounce to let scroll finish
+              observer.disconnect();
+            }
+          },
+          { threshold: 1 },
+        );
 
-      setPosInfo(origin => {
-        if (JSON.stringify(origin) !== JSON.stringify(nextPosInfo)) {
-          return nextPosInfo;
-        }
-        return origin;
-      });
+        observer.observe(targetElement);
+      } else {
+        calculatePosition();
+      }
     } else {
       // Not exist target which means we just show in center
       setPosInfo(null);