diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte index 8d5800e9a8..dd74faa56b 100644 --- a/web/src/lib/components/shared-components/combobox.svelte +++ b/web/src/lib/components/shared-components/combobox.svelte @@ -46,6 +46,7 @@ */ defaultFirstOption?: boolean; onSelect?: (option: ComboBoxOption | undefined) => void; + forceFocus?: boolean; } let { @@ -57,6 +58,7 @@ allowCreate = false, defaultFirstOption = false, onSelect = () => {}, + forceFocus = false, }: Props = $props(); /** @@ -115,6 +117,12 @@ }; }); + const forceFocusInput = (el: HTMLDivElement) => { + if (forceFocus) { + el.focus(); + } + }; + const activate = () => { isActive = true; searchQuery = ''; @@ -284,6 +292,7 @@ role="combobox" type="text" value={searchQuery} + use:forceFocusInput use:shortcuts={[ { shortcut: { key: 'ArrowUp' }, diff --git a/web/src/lib/modals/AssetTagModal.svelte b/web/src/lib/modals/AssetTagModal.svelte index 2a61f0b945..2daf17dd97 100644 --- a/web/src/lib/modals/AssetTagModal.svelte +++ b/web/src/lib/modals/AssetTagModal.svelte @@ -66,6 +66,7 @@ defaultFirstOption options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))} placeholder={$t('search_tags')} + forceFocus />