SONAR-21339 Fix spotlight tour anchor jumping when loosing focus

1 files changed, 13 insertions, 15 deletions

diff --git a/server/sonar-web/design-system/src/components/SpotlightTour.tsx b/server/sonar-web/design-system/src/components/SpotlightTour.tsx
index d9753e75d47..b64220e72b8 100644
--- a/server/sonar-web/design-system/src/components/SpotlightTour.tsx
+++ b/server/sonar-web/design-system/src/components/SpotlightTour.tsx
@@ -78,10 +78,8 @@ function TooltipComponent({
   width?: number;
 }) {
   const [timeStamp, setTimeStamp] = React.useState(0);
-  const ref = React.useRef<HTMLDivElement | null>(null);
-  const setRef = React.useCallback((node: HTMLDivElement) => {
-    ref.current = node;
-  }, []);
+  const [ref, setRef] = React.useState<HTMLDivElement | null>(null);
+
   const placement = step.placement ?? DEFAULT_PLACEMENT;
   const intl = useIntl();
 
@@ -96,13 +94,6 @@ function TooltipComponent({
     };
   }, [step]);
 
-  const rect = ref.current?.parentElement?.getBoundingClientRect();
-  const targetElement =
-    typeof step.target === 'string'
-      ? document.querySelector<HTMLElement>(step.target)
-      : step.target;
-  const targetRect = targetElement?.getBoundingClientRect();
-
   React.useEffect(() => {
     const updateScroll = (event: Event) => {
       // The spotlight is doint transition that would look strange when we
@@ -119,10 +110,12 @@ function TooltipComponent({
     };
   }, []);
 
-  const arrowPosition = React.useMemo(
-    () => findAnchor(rect ?? defultRect, targetRect ?? defultRect, PULSE_SIZE),
-    [rect, targetRect, timeStamp],
-  );
+  const rect = ref?.parentElement?.getBoundingClientRect();
+  const targetElement =
+    typeof step.target === 'string'
+      ? document.querySelector<HTMLElement>(step.target)
+      : step.target;
+  const targetRect = targetElement?.getBoundingClientRect();
 
   /**
    * Preventing click events from bubbling to avoid closing other popups, in cases when the guide
@@ -132,6 +125,11 @@ function TooltipComponent({
     e.stopPropagation();
   }
 
+  const arrowPosition = React.useMemo(
+    () => findAnchor(rect ?? defultRect, targetRect ?? defultRect, PULSE_SIZE),
+    [rect, targetRect, timeStamp],
+  );
+
   return (
     <StyledPopupWrapper
       className="sw-p-3 sw-body-sm sw-relative sw-border-0"