edvoyui-component-library-test-flight 0.0.222 → 0.0.224

package/dist/components/dropdown/EUIMultiDropdown.d.ts

@@ -19,6 +19,7 @@ declare function __VLS_template(): {
         }): any;
     };
     refs: {
+        dropdownRoot: HTMLDivElement;
         dropdownButton: HTMLButtonElement;
         dropdownMenu: HTMLDivElement;
     };
@@ -67,6 +68,15 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: PropType<"top" | "bottom" | "left" | "right">;
         default: string;
     };
+    /**
+     * Keep the dropdown open while the user interacts with content inside the menu
+     * (search fields, row actions). Selecting an item and clicking outside still close it.
+     * Off by default so existing menus keep dismissing on any click inside them.
+     */
+    keepOpenOnContentClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {
     subMenuItem: (...args: any[]) => void;
     menuItem: (...args: any[]) => void;
@@ -113,6 +123,15 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: PropType<"top" | "bottom" | "left" | "right">;
         default: string;
     };
+    /**
+     * Keep the dropdown open while the user interacts with content inside the menu
+     * (search fields, row actions). Selecting an item and clicking outside still close it.
+     * Off by default so existing menus keep dismissing on any click inside them.
+     */
+    keepOpenOnContentClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onSubMenuItem?: ((...args: any[]) => any) | undefined;
     onMenuItem?: ((...args: any[]) => any) | undefined;
@@ -123,7 +142,9 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     placement: "top" | "bottom" | "right" | "left";
     isSolidArrow: boolean;
     menuItems: MenuItem[];
+    keepOpenOnContentClick: boolean;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {
+    dropdownRoot: HTMLDivElement;
     dropdownButton: HTMLButtonElement;
     dropdownMenu: HTMLDivElement;
 }, HTMLDivElement>;

package/dist/components/dropdown/EUIMultiDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <div ref="dropdownRoot" class="relative">
     <!-- Main Dropdown Button -->
     <button
       type="button"
@@ -35,7 +35,7 @@
         class="relative flex items-center px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100"
         @mouseenter="setActiveMenuItem(item.text)"
         @mouseleave="clearActiveMenuItem"
-        @click.stop="$emit('menuItem', item)"
+        @click.stop="selectMenuItem(item)"
       >
         <div
           class="flex items-center justify-between w-full gap-2 text-sm font-medium text-gray-800 break-words hover:text-gray-900"
@@ -66,7 +66,7 @@
             <div
               v-if="item.enableAction"
               class="flex items-center justify-center w-full gap-1 px-6 py-3 text-sm font-medium text-gray-900 bg-purple-100 rounded-t-md"
-              @click.prevent="$emit('actionItem', 'action')"
+              @click.stop.prevent="triggerActionItem()"
             >
               <slot name="actionName">{{ "+ Action Name" }}</slot>
             </div>
@@ -77,7 +77,7 @@
                 v-for="subItem in item.subMenu"
                 :key="subItem.text"
                 class="flex items-center justify-between gap-2 px-3 py-2 text-sm font-medium text-gray-700 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-gray-900"
-                @click.stop="$emit('subMenuItem', subItem)"
+                @click.stop="selectSubMenuItem(subItem)"
               >
                 <slot name="submenu" :subItem="subItem">
                   {{ subItem.text }}
@@ -156,22 +156,37 @@ const props = defineProps({
     type: String as PropType<"top" | "bottom" | "left" | "right">,
     default: "bottom",
   },
+  /**
+   * Keep the dropdown open while the user interacts with content inside the menu
+   * (search fields, row actions). Selecting an item and clicking outside still close it.
+   * Off by default so existing menus keep dismissing on any click inside them.
+   */
+  keepOpenOnContentClick: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const isOpen = ref(false);
 const activeMenuItem = ref<string | null>(null);
+const dropdownRoot = ref<HTMLElement | null>(null);
 const dropdownButton = ref<HTMLElement | null>(null);
 const dropdownMenu = ref<HTMLElement | null>(null);
 const resolvedPlacement = ref<"top" | "bottom" | "left" | "right">(
   props.placement
 );
 
-defineEmits(["subMenuItem", "menuItem", "actionItem"]);
+const emit = defineEmits(["subMenuItem", "menuItem", "actionItem"]);
 
 const toggleDropdown = () => {
   isOpen.value = !isOpen.value;
 };
 
+const closeDropdown = () => {
+  isOpen.value = false;
+  activeMenuItem.value = null;
+};
+
 const setActiveMenuItem = (text: string) => {
   activeMenuItem.value = text;
 };
@@ -180,8 +195,32 @@ const clearActiveMenuItem = () => {
   activeMenuItem.value = null;
 };
 
+const selectMenuItem = (item: MenuItem) => {
+  emit("menuItem", item);
+  closeDropdown();
+};
+
+const selectSubMenuItem = (subItem: MenuItem) => {
+  emit("subMenuItem", subItem);
+  closeDropdown();
+};
+
+const triggerActionItem = () => {
+  emit("actionItem", "action");
+  closeDropdown();
+};
+
+// A click anywhere outside the dropdown always closes it.
+onClickOutside(dropdownRoot, () => {
+  closeDropdown();
+});
+
+// Legacy behaviour: the watcher used to sit on the trigger button alone, so clicks on the
+// menu itself counted as "outside" and dismissed it. Menus that host interactive content
+// opt out with `keepOpenOnContentClick` - they close on selection instead.
 onClickOutside(dropdownButton, () => {
-  isOpen.value = false;
+  if (props.keepOpenOnContentClick) return;
+  closeDropdown();
 });
 
 const updateDropdownPlacement = () => {

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 = (