Make searchbox first focused element in settings dialog (#5804)

## 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)
This commit is contained in:
Christian Byrne
2025-09-26 13:28:30 -07:00
committed by GitHub
parent f2e925de62
commit 1f4a52ca3e
2 changed files with 5 additions and 1 deletions

View File

@@ -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<{

View File

@@ -6,6 +6,7 @@
class="settings-search-box w-full mb-2"
:placeholder="$t('g.searchSettings') + '...'"
:debounce-time="128"
autofocus
@search="handleSearch"
/>
<Listbox