Merge pull request #623 from jens1o/jens1o/seamless-tag-input

Make adding tags more user-friendly

Author: fiji-flo

src/components/profile/edit/EditTags.vue

@@ -35,13 +35,16 @@
       >
       </Tag>
     </div>
+    <!-- add new tag when pressing either the enter or the comma key (keyCode: 188) -->
     <input
       v-if="addingTag"
       type="text"
       v-model="newTag"
       ref="inputTag"
       class="add-tags__input"
       @keydown.enter="handleAddTag"
+      @keydown.188.prevent="handleAddTag"
+      @paste="handlePaste"
     />
     <button
       type="button"
@@ -95,7 +98,6 @@ export default {
       }
       if (this.newTag.length > 0) {
         this.addTag(this.newTag);
-        this.addingTag = false;
       } else {
         this.$refs.inputTag.focus();
       }
@@ -118,6 +120,19 @@ export default {
         this.tags.values.splice(index, 1);
       }
     },
+    handlePaste() {
+      this.$nextTick(() => {
+        let text = this.$refs.inputTag.value;
+
+        if (text === '' || !text.includes(',')) {
+          return;
+        }
+
+        for (let tag of text.split(',')) {
+          this.addTag(tag.trim());
+        }
+      });
+    },
   },
   mounted() {
     this.$refs.header.focus();