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

@@ -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' },

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>