From b125f41abf33cbeec03fbbfb0ac01164517e4ec4 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Fri, 5 Dec 2025 05:47:32 +0100
Subject: [PATCH 1/5] refactor(search): expose focus method in SearchBox
 component

Exposes a  method in the SearchBox component to allow parent components to programmatically set focus on the input element.
---
 src/components/common/SearchBox.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue
index 8fbf3a34a0..00b705ce17 100644
--- a/src/components/common/SearchBox.vue
+++ b/src/components/common/SearchBox.vue
@@ -10,6 +10,7 @@
         @click="$emit('showFilter', $event)"
       />
       <InputText
+        ref="inputRef"
         class="search-box-input w-full"
         :model-value="modelValue"
         :placeholder="placeholder"
@@ -48,6 +49,7 @@ import Button from 'primevue/button'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
+import { ref } from 'vue'
 
 import type { SearchFilter } from './SearchFilterChip.vue'
 import SearchFilterChip from './SearchFilterChip.vue'
@@ -77,6 +79,14 @@ const emit = defineEmits<{
   (e: 'removeFilter', filter: TFilter): void
 }>()
 
+const inputRef = ref()
+
+defineExpose({
+  focus: () => {
+    inputRef.value?.$el?.focus()
+  }
+})
+
 const emitSearch = debounce((value: string) => {
   emit('search', value, filters)
 }, debounceTime)

From 8b90106e838cb73508e3ee963e8a93d7c35e73f0 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Fri, 5 Dec 2025 05:48:33 +0100
Subject: [PATCH 2/5] feat(sidebar): autofocus search input when selecting
 workflows tab

Automatically focuses the search box when the Workflows sidebar tab is activated to improve user efficiency.
---
 src/components/sidebar/tabs/WorkflowsSidebarTab.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
index 4f5377dffb..f0d41fd96c 100644
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -14,6 +14,7 @@
     </template>
     <template #header>
       <SearchBox
+        ref="searchBoxRef"
         v-model:model-value="searchQuery"
         class="workflows-search-box p-2 2xl:p-4"
         :placeholder="$t('g.searchWorkflows') + '...'"
@@ -158,6 +159,12 @@ const workflowTabsPosition = computed(() =>
   settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
 )
 
+const searchBoxRef = ref()
+
+onMounted(() => {
+  searchBoxRef.value?.focus()
+})
+
 const searchQuery = ref('')
 const isSearching = computed(() => searchQuery.value.length > 0)
 const filteredWorkflows = ref<ComfyWorkflow[]>([])

From c5e39971836c752e7580b124729ac2cb325a07c4 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Fri, 5 Dec 2025 05:48:57 +0100
Subject: [PATCH 3/5] feat(sidebar): autofocus search input in model library
 tab

Focuses the search box in the Model Library sidebar tab upon mounting.
---
 src/components/sidebar/tabs/ModelLibrarySidebarTab.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 9ff7bd7638..c5cf5e9bd0 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -21,6 +21,7 @@
     </template>
     <template #header>
       <SearchBox
+        ref="searchBoxRef"
         v-model:model-value="searchQuery"
         class="model-lib-search-box p-2 2xl:p-4"
         :placeholder="$t('g.searchModels') + '...'"
@@ -66,6 +67,7 @@ import { buildTree } from '@/utils/treeUtil'
 const modelStore = useModelStore()
 const modelToNodeStore = useModelToNodeStore()
 const settingStore = useSettingStore()
+const searchBoxRef = ref()
 const searchQuery = ref<string>('')
 const expandedKeys = ref<Record<string, boolean>>({})
 const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
@@ -180,6 +182,7 @@ watch(
 )
 
 onMounted(async () => {
+  searchBoxRef.value?.focus()
   if (settingStore.get('Comfy.ModelLibrary.AutoLoadAll')) {
     await modelStore.loadModels()
   }

From 6cf02d25ba4c0be88cbb32bb71b7a5ccb19f5223 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Fri, 5 Dec 2025 05:49:17 +0100
Subject: [PATCH 4/5] feat(sidebar): autofocus search input in node library tab

Focuses the search box in the Node Library sidebar tab upon mounting.
---
 src/components/sidebar/tabs/NodeLibrarySidebarTab.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
index a6352ed7f9..edfa36288e 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -78,6 +78,7 @@
       <template #header>
         <div>
           <SearchBox
+            ref="searchBoxRef"
             v-model:model-value="searchQuery"
             class="node-lib-search-box p-2 2xl:p-4"
             :placeholder="$t('g.searchNodes') + '...'"
@@ -130,7 +131,7 @@ import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
 import type { Ref } from 'vue'
-import { computed, h, nextTick, ref, render } from 'vue'
+import { computed, h, nextTick, onMounted, ref, render } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
 import type { SearchFilter } from '@/components/common/SearchFilterChip.vue'
@@ -171,6 +172,12 @@ const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 const nodeBookmarkTreeExplorerRef = ref<InstanceType<
   typeof NodeBookmarkTreeExplorer
 > | null>(null)
+const searchBoxRef = ref()
+
+onMounted(() => {
+  searchBoxRef.value?.focus()
+})
+
 const searchFilter = ref<InstanceType<typeof Popover> | null>(null)
 const groupingPopover = ref<InstanceType<typeof Popover> | null>(null)
 const sortingPopover = ref<InstanceType<typeof Popover> | null>(null)

From 903fd47d416d3d8bee71c835110cefc5a6e99375 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Fri, 5 Dec 2025 05:57:15 +0100
Subject: [PATCH 5/5] refactor: Consolidate search box focus with bookmark
 loading in onMounted hook.

---
 src/components/sidebar/tabs/WorkflowsSidebarTab.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
index f0d41fd96c..d4a649ac8b 100644
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -161,10 +161,6 @@ const workflowTabsPosition = computed(() =>
 
 const searchBoxRef = ref()
 
-onMounted(() => {
-  searchBoxRef.value?.focus()
-})
-
 const searchQuery = ref('')
 const isSearching = computed(() => searchQuery.value.length > 0)
 const filteredWorkflows = ref<ComfyWorkflow[]>([])
@@ -302,6 +298,7 @@ const selectionKeys = computed(() => ({
 
 const workflowBookmarkStore = useWorkflowBookmarkStore()
 onMounted(async () => {
+  searchBoxRef.value?.focus()
   await workflowBookmarkStore.loadBookmarks()
 })
 </script>