fix: don't calculate position until displayed

Author: Jakeii

src/lib/Popdown.svelte

@@ -13,15 +13,18 @@
   export let calcTop: null | CalcPosition = null;
   export let zIndex: null | number = null;
 
-  let trigger: Writable<HTMLElement> = writable();
-  let windowSize: Writable<number[]> = writable();
-  let content: Writable<HTMLElement> = writable();
+  const trigger: Writable<HTMLElement> = writable();
+  const windowSize: Writable<number[]> = writable();
+  const content: Writable<HTMLElement> = writable();
+  const displayContent: Writable<boolean> = writable(showContent);
+
+  $: displayContent.set(showContent);
 
   const bindTrigger = (el: HTMLElement) => {
     $trigger = el.firstChild instanceof HTMLElement ? el.firstChild : el;
   };
 
-  let targetElement: Writable<HTMLElement> = writable();
+  const targetElement: Writable<HTMLElement> = writable();
 
   const updateTargetElement = (target: string | HTMLElement): void => {
     if (isBrowser && typeof target === 'string') {
@@ -38,6 +41,7 @@
   $: updateTargetElement(target);
 
   const contentTransformStyle = createContentTransformStyleStore(
+    displayContent,
     windowSize,
     targetElement,
     trigger,

src/lib/stores/popdown.ts

@@ -4,6 +4,7 @@ import { calcTranslateX, calcTranslateY } from '../util/popdown-translate';
 export type CalcPosition = (triggerPosition: number) => number;
 
 export const createContentTransformStyleStore = (
+  showContent: Readable<boolean>,
   windowSize: Readable<number[]>,
   scrollParent: Readable<HTMLElement>,
   trigger: Writable<HTMLElement>,
@@ -42,41 +43,39 @@ export const createContentTransformStyleStore = (
   );
 
   return derived(
-    [windowSize, trigger, ancestorOffset],
+    [showContent, windowSize, trigger, ancestorOffset],
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ([_windowSize, $trigger, $ancestorOffset]) => {
+    ([$showContent, _windowSize, $trigger, $ancestorOffset]) => {
+      if (!$trigger || !$showContent) return '';
       let translateX = '';
       let translateY = '';
-      if ($trigger) {
-        const {
-          left: triggerLeft,
-          right: triggerRight,
-          top: triggerTop,
-          bottom: triggerBottom,
-          width: triggerWidth,
-          height: triggerHeight,
-        } = $trigger.getBoundingClientRect();
+      const {
+        left: triggerLeft,
+        right: triggerRight,
+        top: triggerTop,
+        bottom: triggerBottom,
+        width: triggerWidth,
+        height: triggerHeight,
+      } = $trigger.getBoundingClientRect();
 
-        const { left: offsetLeft, top: offsetTop } = $ancestorOffset || {
-          left: 0,
-          top: 0,
-        };
-
-        if (calcLeft) {
-          translateX = String(calcLeft(triggerLeft));
-        } else {
-          translateX = calcTranslateX(position, triggerRight, triggerLeft, offsetLeft, triggerWidth);
-        }
+      const { left: offsetLeft, top: offsetTop } = $ancestorOffset || {
+        left: 0,
+        top: 0,
+      };
 
-        if (calcTop) {
-          translateY = String(calcTop(triggerLeft));
-        } else {
-          translateY = calcTranslateY(position, triggerTop, offsetTop, triggerBottom, triggerHeight);
-        }
+      if (calcLeft) {
+        translateX = String(calcLeft(triggerLeft));
+      } else {
+        translateX = calcTranslateX(position, triggerRight, triggerLeft, offsetLeft, triggerWidth);
+      }
 
-        return `translate(${translateX}, ${translateY})`;
+      if (calcTop) {
+        translateY = String(calcTop(triggerLeft));
+      } else {
+        translateY = calcTranslateY(position, triggerTop, offsetTop, triggerBottom, triggerHeight);
       }
-      return '';
+
+      return `translate(${translateX}, ${translateY})`;
     },
   );
 };