From 369c1fe376881b4687161929542670034a8c3939 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 8 Jul 2025 17:25:15 +0800
Subject: [PATCH] fix search dropdown

---
 open-isle-cli/src/components/Dropdown.vue       | 16 +++++++++++++---
 open-isle-cli/src/components/SearchDropdown.vue | 10 ++++++++--
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/open-isle-cli/src/components/Dropdown.vue b/open-isle-cli/src/components/Dropdown.vue
index d57075622..5eac65ddd 100644
--- a/open-isle-cli/src/components/Dropdown.vue
+++ b/open-isle-cli/src/components/Dropdown.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="dropdown" ref="wrapper">
-    <div class="dropdown-display" @click="toggle">
-      <slot name="display" :selected="selectedLabels" :toggle="toggle" :search="search">
+      <div class="dropdown-display" @click="toggle">
+        <slot
+          name="display"
+          :selected="selectedLabels"
+          :toggle="toggle"
+          :search="search"
+          :setSearch="setSearch"
+        >
       <template v-if="multiple">
         <span v-if="selectedLabels.length">
           <template v-for="(label, idx) in selectedLabels" :key="label.id">
@@ -76,6 +82,9 @@ export default {
   setup(props, { emit }) {
     const open = ref(false)
     const search = ref('')
+    const setSearch = (val) => {
+      search.value = val
+    }
     const options = ref([])
     const loaded = ref(false)
     const loading = ref(false)
@@ -185,7 +194,8 @@ export default {
       selectedLabels,
       isSelected,
       loading,
-      isImageIcon
+      isImageIcon,
+      setSearch
     }
   }
 }
diff --git a/open-isle-cli/src/components/SearchDropdown.vue b/open-isle-cli/src/components/SearchDropdown.vue
index 5b510e018..79ae4df90 100644
--- a/open-isle-cli/src/components/SearchDropdown.vue
+++ b/open-isle-cli/src/components/SearchDropdown.vue
@@ -6,10 +6,16 @@
     menu-class="search-menu"
     option-class="search-option"
   >
-    <template #display="{ toggle, search }">
+    <template #display="{ toggle, setSearch }">
       <div class="search-input" @click="toggle">
         <i class="search-input-icon fas fa-search"></i>
-        <input type="text" v-model="keyword" placeholder="Search" @focus="toggle" @input="search.value = keyword" />
+        <input
+          type="text"
+          v-model="keyword"
+          placeholder="Search"
+          @focus="toggle"
+          @input="setSearch(keyword)"
+        />
       </div>
     </template>
     <template #option="{ option }">