Wrap check in useLayoutEffect

seek-oss · Oct 17, 2023 · c9765ad · c9765ad
1 parent f25c0d9
commit c9765ad
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/packages/braid-design-system/src/lib/components/TooltipRenderer/TooltipRenderer.tsx b/packages/braid-design-system/src/lib/components/TooltipRenderer/TooltipRenderer.tsx
@@ -5,6 +5,7 @@ import React, {
   useEffect,
   useContext,
   useRef,
+  useLayoutEffect,
 } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
 import isMobile from 'is-mobile';
@@ -205,23 +206,25 @@ export const TooltipRenderer = ({
     },
   );
 
-  // If the tooltip is visible and the size or position of either the trigger
-  // or the tooltip has changed, then update the tooltip size and position.
-  if (
-    controlledVisible &&
-    update &&
-    (doesBoundingBoxNeedUpdating(triggerRef, triggerBoundingBoxRef.current) ||
-      doesBoundingBoxNeedUpdating(tooltipRef, tooltipBoundingRectRef.current))
-  ) {
-    triggerBoundingBoxRef.current = normaliseRect(
-      triggerRef?.getBoundingClientRect(),
-    );
-    tooltipBoundingRectRef.current = normaliseRect(
-      tooltipRef?.getBoundingClientRect(),
-    );
-
-    update();
-  }
+  useLayoutEffect(() => {
+    // If the tooltip is visible and the size or position of either the trigger
+    // or the tooltip has changed, then update the tooltip size and position.
+    if (
+      controlledVisible &&
+      update &&
+      (doesBoundingBoxNeedUpdating(triggerRef, triggerBoundingBoxRef.current) ||
+        doesBoundingBoxNeedUpdating(tooltipRef, tooltipBoundingRectRef.current))
+    ) {
+      triggerBoundingBoxRef.current = normaliseRect(
+        triggerRef?.getBoundingClientRect(),
+      );
+      tooltipBoundingRectRef.current = normaliseRect(
+        tooltipRef?.getBoundingClientRect(),
+      );
+
+      update();
+    }
+  });
 
   useEffect(() => {
     if (visible) {