Auto-expand model library tree on search (#1357)

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -24,6 +24,7 @@
         class="model-lib-search-box p-4"
         v-model:modelValue="searchQuery"
         :placeholder="$t('searchModels') + '...'"
+        @search="handleSearch"
       />
     </template>
     <template #body>
@@ -60,7 +61,7 @@ import type {
   RenderedTreeExplorerNode,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
-import { computed, ref, watch, toRef, onMounted } from 'vue'
+import { computed, ref, watch, toRef, onMounted, nextTick } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
 import { app } from '@/scripts/app'
 import { buildTree } from '@/utils/treeUtil'
@@ -69,17 +70,26 @@ const modelToNodeStore = useModelToNodeStore()
 const settingStore = useSettingStore()
 const searchQuery = ref<string>('')
 const expandedKeys = ref<Record<string, boolean>>({})
-const { toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
+const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 
-const filteredModels = computed<ComfyModelDef[]>(() => {
+const filteredModels = ref<ComfyModelDef[]>([])
-  if (searchQuery.value) {
+const handleSearch = async (query: string) => {
-    const search = searchQuery.value.toLocaleLowerCase()
+  if (!query) {
-    return modelStore.models.filter((model: ComfyModelDef) => {
+    filteredModels.value = modelStore.models
-      return model.searchable.includes(search)
+    expandedKeys.value = {}
-    })
+    return
   }
-  return modelStore.models
+  // Load all models to ensure we have the latest data
-})
+  await modelStore.loadModels()
+  const search = query.toLocaleLowerCase()
+  filteredModels.value = modelStore.models.filter((model: ComfyModelDef) => {
+    return model.searchable.includes(search)
+  })
+
+  nextTick(() => {
+    expandNode(root.value)
+  })
+}
 
 type ModelOrFolder = ComfyModelDef | ModelFolder