edvoyui-component-library-test-flight 0.0.221 → 0.0.223

package/dist/components/popover/EUIPopover.d.ts

@@ -52,6 +52,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: NumberConstructor;
         default: number;
     };
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {} & {
     "update:visible": (value: boolean) => any;
     show: () => any;
@@ -92,6 +96,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: NumberConstructor;
         default: number;
     };
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:visible"?: ((value: boolean) => any) | undefined;
     onShow?: (() => any) | undefined;
@@ -105,6 +113,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     customButton: string;
     visible: boolean;
     hoverHideDelay: number;
+    teleported: boolean;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {
     popperWrapper: HTMLDivElement;
     popperButton: HTMLDivElement;

package/dist/components/popover/EUIPopover.vue

@@ -15,24 +15,30 @@
     >
       <slot name="referenceButton" :open="isOpen"/>
     </div>
-    <div
-     ref="tooltip"
-      :id="tooltipId"
-      role="tooltip"
-      :class="['poppertooltip h-auto text-sm font-normal select-none z-50', className]"
-      :data-show="isOpen ? '' : null"
-      @click.stop
-      @mouseenter="handleTooltipMouseEnter"
-      @mouseleave="handleTooltipMouseLeave"
-    >
-      <div ref="arrowElement" class="arrow" data-popper-arrow />
+    <!-- When `teleported`, the tooltip is rendered at <body> (Popper uses a
+         `fixed` strategy) so it escapes any ancestor `overflow`/stacking
+         context — e.g. a scrollable table or a sticky column. Disabled by
+         default, so existing usages keep rendering the tooltip in place. -->
+    <Teleport to="body" :disabled="!teleported">
       <div
-        v-if="title"
-        class="text-base font-semibold text-current leading-[normal] px-4 py-2"
-        v-text="title"
-      />
-      <slot />
-    </div>
+        ref="tooltip"
+        :id="tooltipId"
+        role="tooltip"
+        :class="['poppertooltip h-auto text-sm font-normal select-none z-50', className]"
+        :data-show="isOpen ? '' : null"
+        @click.stop
+        @mouseenter="handleTooltipMouseEnter"
+        @mouseleave="handleTooltipMouseLeave"
+      >
+        <div ref="arrowElement" class="arrow" data-popper-arrow />
+        <div
+          v-if="title"
+          class="text-base font-semibold text-current leading-[normal] px-4 py-2"
+          v-text="title"
+        />
+        <slot />
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -77,6 +83,12 @@ const props = defineProps({
     type: Number,
     default: 100,
   },
+  // Render the tooltip at <body> using a fixed Popper strategy so it can break
+  // out of ancestor overflow/stacking contexts. Off by default for back-compat.
+  teleported: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const popperWrapper = ref<HTMLElement | null>(null);
@@ -122,6 +134,9 @@ const initializePopper = () => {
   if (popperButton.value && tooltip.value && arrowElement.value) {
     popperInstance.value = createPopper(popperButton.value, tooltip.value, {
       placement: props.placement,
+      // `fixed` keeps the teleported tooltip glued to the trigger without an
+      // offset parent; `absolute` (Popper's default) is unchanged otherwise.
+      strategy: props.teleported ? 'fixed' : 'absolute',
       modifiers: [
         { name: 'offset', options: { offset: [0, 10] } },
         { name: 'arrow', options: { element: arrowElement.value } },
@@ -229,11 +244,13 @@ onMounted(() => {
   }
 
   if (props.trigger === 'click') {
+    // `tooltip` is ignored too: once teleported it lives outside popperWrapper,
+    // so clicks inside it would otherwise register as "outside" and close it.
     onClickOutside(popperWrapper.value, () => {
         if (isOpen.value) {
              hide(true);
         }
-    }, { ignore: [popperButton] });
+    }, { ignore: [popperButton, tooltip] });
   }
 });
 

package/dist/components/select/EUISelect.vue

@@ -620,7 +620,7 @@ const offsetValue = computed(() => props.customOffset);
 
 const withPopper = (
   dropdownList: HTMLElement,
-  component: { $refs: { toggle: Element | VirtualElement } },
+  component: { $refs: { toggle: Element | VirtualElement }; open: boolean },
   { width, maxHeight }: any,
 ) => {
   const newwidth = selectWidth.value || width; //setcustom width '400px'
@@ -645,7 +645,23 @@ const withPopper = (
     ],
   });
   dropdownList.classList.add("toggle-dropdown");
-  return () => popper.destroy();
+
+  // The dropdown is appended to <body>, so it only tracks its trigger via
+  // Popper's rAF-scheduled scroll listener, which visibly lags the trigger
+  // during a fast/continuous scroll of an ancestor container until scrolling
+  // stops. Closing immediately on any outside scroll (capture phase catches
+  // non-bubbling scroll events from nested containers) avoids that detached,
+  // floating state entirely.
+  const closeOnScroll = (event: Event) => {
+    if (dropdownList.contains(event.target as Node)) return;
+    component.open = false;
+  };
+  document.addEventListener("scroll", closeOnScroll, true);
+
+  return () => {
+    document.removeEventListener("scroll", closeOnScroll, true);
+    popper.destroy();
+  };
 };
 
 const fuseSearch = (