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

package/dist/components/dropdown/EUIMultiDropdown.vue

@@ -34,7 +34,9 @@
         :key="item.text"
         class="relative flex items-center px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100"
         @mouseenter="setActiveMenuItem(item.text)"
-        @mouseleave="clearActiveMenuItem"
+        @mouseleave="scheduleClearActiveMenuItem(item.text)"
+        @focusin="setActiveMenuItem(item.text)"
+        @focusout="scheduleClearActiveMenuItem(item.text)"
         @click.stop="selectMenuItem(item)"
       >
         <div
@@ -59,6 +61,7 @@
         <div
           v-if="item.subMenu && activeMenuItem === item.text"
           :class="['absolute top-0 z-10 transition-all duration-300 ease-in-out min-w-32 max-w-64 w-max', placement === 'right' ? 'right-full' : 'left-full']"
+          @mouseenter="setActiveMenuItem(item.text)"
         >
           <div
             class="bg-white border border-gray-200 border-solid rounded-lg shadow-2xl ms-2 shadow-gray-300"
@@ -175,24 +178,37 @@ const dropdownMenu = ref<HTMLElement | null>(null);
 const resolvedPlacement = ref<"top" | "bottom" | "left" | "right">(
   props.placement
 );
+let activeMenuCloseTimer: ReturnType<typeof setTimeout> | undefined;
 
 const emit = defineEmits(["subMenuItem", "menuItem", "actionItem"]);
 
 const toggleDropdown = () => {
-  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    closeDropdown();
+    return;
+  }
+
+  isOpen.value = true;
 };
 
 const closeDropdown = () => {
+  clearTimeout(activeMenuCloseTimer);
   isOpen.value = false;
   activeMenuItem.value = null;
 };
 
 const setActiveMenuItem = (text: string) => {
+  clearTimeout(activeMenuCloseTimer);
   activeMenuItem.value = text;
 };
 
-const clearActiveMenuItem = () => {
-  activeMenuItem.value = null;
+const scheduleClearActiveMenuItem = (text: string) => {
+  clearTimeout(activeMenuCloseTimer);
+  activeMenuCloseTimer = setTimeout(() => {
+    // Interactive submenu content (for example, search) must stay mounted while focused.
+    if (dropdownMenu.value?.contains(document.activeElement)) return;
+    if (activeMenuItem.value === text) activeMenuItem.value = null;
+  }, 150);
 };
 
 const selectMenuItem = (item: MenuItem) => {
@@ -272,6 +288,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
+  clearTimeout(activeMenuCloseTimer);
   window.removeEventListener("resize", updateDropdownPlacement);
   window.removeEventListener("scroll", updateDropdownPlacement, true);
 });

package/dist/components/searchexpand/EUISearchExpand.vue

@@ -63,7 +63,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, PropType, ref, toRefs, watch } from "vue";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
 import SearchBigZoomIn from "../../assets/svg/SearchBigZoomIn.vue";
 
 const props = defineProps({
@@ -87,12 +96,13 @@ const emit = defineEmits(["update:modelValue"]);
 
 const input = ref<HTMLInputElement>();
 const isExpanded = ref(true);
-const searchQuery = ref();
+const searchQuery = ref<string | number>(props.modelValue ?? "");
 const componentWrapper = ref<HTMLElement | null>(null);
 
-function expandInput() {
+async function expandInput() {
   isExpanded.value = true;
-  input?.value?.focus();
+  await nextTick();
+  input.value?.focus();
 }
 
 const inputValue = computed(() => {
@@ -124,10 +134,19 @@ watch(
   { immediate: true, deep: true }
 );
 
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue !== searchQuery.value) {
+      searchQuery.value = newValue ?? "";
+    }
+  }
+);
+
 onMounted(() => {
   document.addEventListener("click", handleOutsideClick);
-  if (searchQuery.value) {
-    searchQuery.value?.focus();
+  if (isExpanded.value) {
+    nextTick(() => input.value?.focus());
   }
 });