Merge pull request #1223 from Wizleap-Inc/fix/popup-position

fix: ポップアップの座標計算修正（React）
Wizleap-Inc · Feb 27, 2024 · 81ccf0d · 81ccf0d
2 parents 736839e + dc45aec
commit 81ccf0d
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 34 deletions.
diff --git a/.changeset/moody-fishes-ring.md b/.changeset/moody-fishes-ring.md
@@ -0,0 +1,5 @@
+---
+"@wizleap-inc/wiz-ui-react": patch
+---
+
+popup の座標計算タイミングを追加
diff --git a/packages/wiz-ui-react/src/components/base/popup/components/popup.tsx b/packages/wiz-ui-react/src/components/base/popup/components/popup.tsx
@@ -12,7 +12,9 @@ import {
   FC,
   ReactNode,
   RefObject,
+  useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from "react";
@@ -81,38 +83,42 @@ const Popup: FC<Props> = ({
 
   const isPopupFixed = hasFixedOrStickyParent(anchorElement.current);
 
+  const updatePopupPosition = useCallback(() => {
+    if (!anchorElement.current || !popupRef.current) {
+      return;
+    }
+
+    const fontSize = window.getComputedStyle(document.body).fontSize;
+    const contentRect = popupRef.current.getBoundingClientRect();
+
+    setPopupPosition(
+      getPopupPosition({
+        anchorRect: anchorElement.current.getBoundingClientRect(),
+        popupSize: {
+          width: contentRect.width,
+          height: contentRect.height,
+        },
+        directionKey: direction,
+        gap: parseFloat(getSpacingCss(gap) || "0") * parseFloat(fontSize),
+        screenSize: {
+          width: document.body.clientWidth,
+          height: Math.max(document.body.clientHeight, window.innerHeight),
+        },
+        scroll: {
+          x: isPopupFixed ? 0 : window.scrollX,
+          y: isPopupFixed ? 0 : window.scrollY,
+        },
+        isDirectionFixed,
+      })
+    );
+  }, [anchorElement, direction, gap, isDirectionFixed, isPopupFixed]);
+
   useEffect(() => {
     const anchor = anchorElement.current;
     const content = popupRef.current;
     if (!isActuallyOpen || !anchor || !content) {
       return;
     }
-    const updatePopupPosition = () => {
-      const fontSize = window.getComputedStyle(document.body).fontSize;
-      const contentRect = content.getBoundingClientRect();
-
-      setPopupPosition(
-        getPopupPosition({
-          anchorRect: anchor.getBoundingClientRect(),
-          popupSize: {
-            width: contentRect.width,
-            height: contentRect.height,
-          },
-          directionKey: direction,
-          gap: parseFloat(getSpacingCss(gap) || "0") * parseFloat(fontSize),
-          screenSize: {
-            width: document.body.clientWidth,
-            height: Math.max(document.body.clientHeight, window.innerHeight),
-          },
-          scroll: {
-            x: isPopupFixed ? 0 : window.scrollX,
-            y: isPopupFixed ? 0 : window.scrollY,
-          },
-          isDirectionFixed,
-        })
-      );
-    };
-
     updatePopupPosition();
     window.addEventListener("scroll", updatePopupPosition);
     window.addEventListener("resize", updatePopupPosition);
@@ -123,14 +129,13 @@ const Popup: FC<Props> = ({
       window.removeEventListener("scroll", updatePopupPosition);
       anchorResizeObserver.disconnect();
     };
-  }, [
-    anchorElement,
-    direction,
-    gap,
-    isActuallyOpen,
-    isDirectionFixed,
-    isPopupFixed,
-  ]);
+  }, [anchorElement, isActuallyOpen, updatePopupPosition]);
+
+  useLayoutEffect(() => {
+    if (children) {
+      updatePopupPosition();
+    }
+  }, [children, updatePopupPosition]);
 
   return (
     <WizPortal container={document.body}>