From 526206b2a52f0507cd83b2f1d5af1d2c520e0271 Mon Sep 17 00:00:00 2001
From: xCJPECKOVERx <cjpeckover@hotmail.ca>
Date: Sun, 8 Jun 2025 22:36:34 -0400
Subject: [PATCH] feat(web): Focus on combo box input when opening add tag
 modal (#18923)

- Add forceFocus prop to ComboBox (optional, false)
- Set forceFocus on AssetTagModal combobox
---
 web/src/lib/components/shared-components/combobox.svelte | 9 +++++++++
 web/src/lib/modals/AssetTagModal.svelte                  | 1 +
 2 files changed, 10 insertions(+)

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
         />
       </div>
     </form>