feat: focus tags input box (#6392)

monicahq · Nov 27, 2022 · 2d75053 · 2d75053
1 parent dbe4603
commit 2d75053
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/resources/js/components/people/Tags.vue b/resources/js/components/people/Tags.vue
@@ -35,15 +35,16 @@
 
       <!-- edit button -->
       <li v-show="contactTags.length > 0" class="di">
-        <a v-show="!editMode" class="pointer" href="" @click.prevent="search = ''; editMode = true">
+        <a v-show="!editMode" class="pointer" href="" @click.prevent="enterEditMode">
           {{ $t('app.edit') }}
         </a>
       </li>
 
       <!-- add a new tag -->
       <li v-show="editMode" class="di mb3">
         <div class="relative di mr2">
-          <input v-model="search"
+          <input ref="tags"
+                 v-model="search"
                  type="text"
                  class="di br2 f5 ba b--black-40 pa2 outline-0"
                  :placeholder="$t('people.tag_add_search')"
@@ -66,7 +67,7 @@
           </ul>
         </div>
 
-        <a class="pointer" href="" @click.prevent="editMode = false">
+        <a class="pointer" href="" @click.prevent="search = ''; editMode = false; isOpen = false;">
           {{ $t('app.close') }}
         </a>
       </li>
@@ -76,7 +77,7 @@
         <span class="i mr2">
           {{ $t('people.tag_no_tags') }}
         </span>
-        <a v-show="!editMode" class="pointer" href="" @click.prevent="editMode = true">
+        <a v-show="!editMode" class="pointer" href="" @click.prevent="enterEditMode">
           {{ $t('people.tag_add') }}
         </a>
       </li>
@@ -143,6 +144,11 @@ export default {
         });
     },
 
+    enterEditMode() {
+      this.editMode = true;
+      this.$nextTick(() => this.$refs.tags.focus());
+    },
+
     removeTag(tag) {
       this.contactTags.splice(this.contactTags.indexOf(tag), 1);
       this.store();