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

fix: ポップアップの座標計算修正（vue）
Wizleap-Inc · Feb 27, 2024 · 4116c61 · 4116c61
2 parents 81ccf0d + 76008de
commit 4116c61
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/new-ants-worry.md b/.changeset/new-ants-worry.md
@@ -0,0 +1,5 @@
+---
+"@wizleap-inc/wiz-ui-next": patch
+---
+
+ポップアップの座標計算を修正
diff --git a/packages/wiz-ui-next/src/components/base/popup/popup.vue b/packages/wiz-ui-next/src/components/base/popup/popup.vue
@@ -39,6 +39,7 @@ import {
   inject,
   nextTick,
   onMounted,
+  onUnmounted,
   PropType,
   reactive,
   ref,
@@ -130,6 +131,11 @@ const popupSize = reactive({
   width: 0,
   height: 0,
 });
+const updatePopupSize = () => {
+  popupSize.width = popupRef.value?.offsetWidth ?? 0;
+  popupSize.height = popupRef.value?.offsetHeight ?? 0;
+};
+const popupSizeObserver = new ResizeObserver(updatePopupSize);
 
 const injected = inject(POPUP_KEY);
 
@@ -141,11 +147,13 @@ if (!injected) {
 
 const { bodyPxInfo, updateBodyPxInfo, containerRef } = injected;
 
-// safariでアニメーションを有効にするために必要
 onMounted(() => {
   if (!popupRef.value) return;
+  popupSizeObserver.observe(popupRef.value);
+  // safariでアニメーションを有効にするために必要
   popupRef.value.style.animationName = "fade";
 });
+onUnmounted(() => popupSizeObserver.disconnect());
 
 const togglePopup = () => {
   if (!props.animation) return (isActuallyOpen.value = props.isOpen);
@@ -182,8 +190,7 @@ const onChangeIsOpen = (newValue: boolean) => {
     togglePopup();
     removeScrollHandler = useScroll(updateBodyPxInfo, containerRef.value);
     nextTick(() => {
-      popupSize.width = popupRef.value?.offsetWidth ?? 0;
-      popupSize.height = popupRef.value?.offsetHeight ?? 0;
+      updatePopupSize();
       updateBodyPxInfo();
     });
   } else {