fix: make sure input receives focus first

src/components/generic/TagInput.vue

@@ -3,6 +3,16 @@
     class="form-control tw-flex tw-flex-wrap tw-gap-2 tw-h-auto tw-min-h-[46px] tw-cursor-text"
     @click="inputEl?.focus?.()"
   >
+    <input
+      ref="inputEl"
+      v-model="tagInputValue"
+      type="text"
+      class="tw-flex-1 tw-border-none focus:tw-outline-none tw-p-0 tw-m-0 tw-min-w-[150px] tw-order-last"
+      @keyup.enter.prevent="addTag(tagInputValue)"
+      @keydown.delete="maybeRemoveLastTag"
+      @click.stop
+    />
+
     <span
       v-for="(tag, index) in modelValue"
       :key="index"
@@ -13,16 +23,6 @@
         <icon-system-uicons-cross />
       </button>
     </span>
-
-    <input
-      ref="inputEl"
-      v-model="tagInputValue"
-      type="text"
-      class="tw-flex-1 tw-border-none focus:tw-outline-none tw-p-0 tw-m-0 tw-min-w-[150px]"
-      @keyup.enter.prevent="addTag"
-      @keyup.delete="maybeRemoveLastTag"
-      @click.stop
-    />
   </div>
 </template>