From 1f4a52ca3e7fcabf425a7acf36356415b7b4393f Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Fri, 26 Sep 2025 13:28:30 -0700
Subject: [PATCH] Make searchbox first focused element in settings dialog
 (#5804)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Resolves https://github.com/Comfy-Org/ComfyUI_frontend/issues/5164 by
adding `autofocus` prop to common `SearchBox` component then enabled for
the settings dialog search box (changing first focused element from the
close button). Previously, searchbox was the 2nd item in tab order.

## Review Focus

Accessibility implications of automatic focus and potential interference
with screen readers or keyboard navigation patterns. Already discussed
this previously w.r.t. accessibility, but only now implementing.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5804-Make-searchbox-first-focused-element-in-settings-dialog-27a6d73d3650814997facfa2418e1d40)
by [Unito](https://www.unito.io)
---
 src/components/common/SearchBox.vue                       | 5 ++++-
 src/platform/settings/components/SettingDialogContent.vue | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue
index 605af4d4aa..192e8b9dab 100644
--- a/src/components/common/SearchBox.vue
+++ b/src/components/common/SearchBox.vue
@@ -13,6 +13,7 @@
         class="search-box-input w-full"
         :model-value="modelValue"
         :placeholder="placeholder"
+        :autofocus="autofocus"
         @input="handleInput"
       />
       <InputIcon v-if="!modelValue" :class="icon" />
@@ -57,7 +58,8 @@ const {
   icon = 'pi pi-search',
   debounceTime = 300,
   filterIcon,
-  filters = []
+  filters = [],
+  autofocus = false
 } = defineProps<{
   modelValue: string
   placeholder?: string
@@ -65,6 +67,7 @@ const {
   debounceTime?: number
   filterIcon?: string
   filters?: TFilter[]
+  autofocus?: boolean
 }>()
 
 const emit = defineEmits<{
diff --git a/src/platform/settings/components/SettingDialogContent.vue b/src/platform/settings/components/SettingDialogContent.vue
index bbeb53ca59..d5a8298d95 100644
--- a/src/platform/settings/components/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -6,6 +6,7 @@
         class="settings-search-box w-full mb-2"
         :placeholder="$t('g.searchSettings') + '...'"
         :debounce-time="128"
+        autofocus
         @search="handleSearch"
       />
       <Listbox