Merge pull request #1233 from Wizleap-Inc/fix/fixed-popup

fix: popupの座標計算でvisualViewportを加味するように修正
Wizleap-Inc · Feb 28, 2024 · 9886f68 · 9886f68
2 parents 4116c61 + 8734d4a
commit 9886f68
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 16 deletions.
diff --git a/.changeset/quiet-sheep-jump.md b/.changeset/quiet-sheep-jump.md
@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": patch
+"@wizleap-inc/wiz-ui-next": patch
+"@wizleap-inc/wiz-ui-icons": patch
+---
+
+fix: popup の座標計算で visualViewport を加味するように修正
diff --git a/packages/wiz-ui-next/src/components/base/popup/popup.vue b/packages/wiz-ui-next/src/components/base/popup/popup.vue
@@ -184,14 +184,21 @@ const existsFixedOrStickyParent = (
   return existsFixedOrStickyParent(el.parentElement);
 };
 
+const isFixed = computed(() => {
+  return existsFixedOrStickyParent(containerRef.value || null) ? true : false;
+});
+
 let removeScrollHandler: (() => void) | null = null;
 const onChangeIsOpen = (newValue: boolean) => {
   if (newValue) {
     togglePopup();
-    removeScrollHandler = useScroll(updateBodyPxInfo, containerRef.value);
+    removeScrollHandler = useScroll(
+      () => updateBodyPxInfo(isFixed.value),
+      containerRef.value
+    );
     nextTick(() => {
       updatePopupSize();
-      updateBodyPxInfo();
+      updateBodyPxInfo(isFixed.value);
     });
   } else {
     togglePopup();
@@ -211,7 +218,7 @@ useClickOutside(containerRef, (e) => {
   }
 });
 
-const observer = new ResizeObserver(updateBodyPxInfo);
+const observer = new ResizeObserver(() => updateBodyPxInfo(isFixed.value));
 observer.observe(document.body);
 
 const popupRect = computed(() => {
@@ -355,10 +362,6 @@ watch(
   }
 );
 
-const isFixed = computed(() => {
-  return existsFixedOrStickyParent(containerRef.value || null) ? true : false;
-});
-
 const inset = computed(() => {
   const { scrollX, scrollY } = isFixed.value
     ? { scrollX: 0, scrollY: 0 }

diff --git a/packages/wiz-ui-next/src/components/base/popup/provider.ts b/packages/wiz-ui-next/src/components/base/popup/provider.ts
@@ -22,15 +22,19 @@ export const usePopupProvider = (
   };
   const bodyPxInfo = reactive<PxInfo>(initialPxInfo);
 
-  const updateBodyPxInfo = () => {
+  const updateBodyPxInfo = (isPopupFixed: boolean) => {
     if (containerRef.value) {
       const { top, left, right, bottom, width, height } =
         containerRef.value.getBoundingClientRect();
+      const visualViewportOffset = {
+        top: isPopupFixed ? window.visualViewport?.offsetTop ?? 0 : 0,
+        left: isPopupFixed ? window.visualViewport?.offsetLeft ?? 0 : 0,
+      };
       Object.assign(bodyPxInfo, {
-        top,
-        left,
-        right,
-        bottom,
+        top: top + visualViewportOffset.top,
+        left: left + visualViewportOffset.left,
+        right: right + visualViewportOffset.left,
+        bottom: bottom + visualViewportOffset.top,
         width,
         height,
       });

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
@@ -89,14 +89,13 @@ const Popup: FC<Props> = ({
     }
 
     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,
+          width: popupRef.current.clientWidth,
+          height: popupRef.current.clientHeight,
         },
         directionKey: direction,
         gap: parseFloat(getSpacingCss(gap) || "0") * parseFloat(fontSize),
@@ -109,6 +108,7 @@ const Popup: FC<Props> = ({
           y: isPopupFixed ? 0 : window.scrollY,
         },
         isDirectionFixed,
+        visualViewport: isPopupFixed ? window.visualViewport : null,
       })
     );
   }, [anchorElement, direction, gap, isDirectionFixed, isPopupFixed]);

diff --git a/packages/wiz-ui-react/src/components/base/popup/utils/popup-position.ts b/packages/wiz-ui-react/src/components/base/popup/utils/popup-position.ts
@@ -26,8 +26,14 @@ export class Popup {
     screenSize: Size;
     scroll: Position;
     isDirectionFixed?: boolean;
+    visualViewport?: { offsetTop: number; offsetLeft: number } | null;
   }) {
-    this.anchorRect = args.anchorRect;
+    this.anchorRect = new Rect(
+      args.anchorRect.x + (args.visualViewport?.offsetLeft ?? 0),
+      args.anchorRect.y + (args.visualViewport?.offsetTop ?? 0),
+      args.anchorRect.width,
+      args.anchorRect.height
+    );
     this.popupSize = args.popupSize;
     this.gap = args.gap;
     this.screenSize = args.screenSize;
@@ -234,6 +240,7 @@ export function getPopupPosition({
   screenSize,
   scroll,
   isDirectionFixed,
+  visualViewport,
 }: {
   anchorRect: Rect;
   popupSize: Size;
@@ -242,6 +249,7 @@ export function getPopupPosition({
   screenSize: Size;
   scroll: Position;
   isDirectionFixed?: boolean;
+  visualViewport?: { offsetTop: number; offsetLeft: number } | null;
 }): { top: number; left: number } {
   const popup = new Popup({
     anchorRect,
@@ -250,6 +258,7 @@ export function getPopupPosition({
     screenSize,
     scroll,
     isDirectionFixed,
+    visualViewport,
   });
   return popup.getPosition(directionKey);
 }