Merge pull request #117 from nagisa77/codex/fix-search-dropdown-display-and-error

Fix dropdown search slot update

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
     }
   }
 }

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 }">