Allow tag cancelation (#6436)

* add e2e test

* remove visual test as we can cover this with functional tests

src/api/forms/components/controls/AutoCompleteField.vue

@@ -150,7 +150,7 @@ export default {
         },
         hideOptions(newValue) {
             if (!newValue) {
-                // adding a event listener when the hideOpntions is false (dropdown is visible)
+                // adding a event listener when the hideOptions is false (dropdown is visible)
                 // handleoutsideclick can collapse the dropdown when clicked outside autocomplete
                 document.body.addEventListener('click', this.handleOutsideClick);
             } else {
@@ -242,7 +242,6 @@ export default {
             // dropdown is visible, this will collapse the dropdown.
             const clickedInsideAutocomplete = this.autocompleteInputAndArrow.contains(event.target);
             if (!clickedInsideAutocomplete && !this.hideOptions) {
-                this.$emit('autoCompleteBlur');
                 this.hideOptions = true;
             }
         },

src/plugins/inspectorViews/annotations/tags/TagEditor.vue

@@ -21,7 +21,10 @@
  *****************************************************************************/
 
 <template>
-<div class="c-tag-applier">
+<div
+    ref="TagEditor"
+    class="c-tag-applier"
+>
     <TagSelection
         v-for="(addedTag, index) in addedTags"
         :key="index"
@@ -31,7 +34,6 @@
         :added-tags="addedTags"
         @tagRemoved="tagRemoved"
         @tagAdded="tagAdded"
-        @tagBlurred="tagBlurred"
     />
     <button
         v-show="!userAddingTag && !maxTagsAdded"
@@ -110,6 +112,9 @@ export default {
     mounted() {
         this.annotationsChanged();
     },
+    destroyed() {
+        document.body.removeEventListener('click', this.tagCanceled);
+    },
     methods: {
         annotationsChanged() {
             if (this.annotations) {
@@ -152,6 +157,7 @@ export default {
             };
             this.addedTags.push(newTagValue);
             this.userAddingTag = true;
+            document.body.addEventListener('click', this.tagCanceled);
         },
         async tagRemoved(tagToRemove) {
             // Soft delete annotations that match tag instead (that aren't already deleted)
@@ -167,11 +173,16 @@ export default {
                 }
             }
         },
-        tagBlurred() {
-            // Remove last tag when user clicks outside of TagSelection
-            this.addedTags.pop();
-            // Hide TagSelection and show "Add Tag" button
-            this.userAddingTag = false;
+        tagCanceled(event) {
+            if (this.$refs.TagEditor) {
+                const clickedInsideTagEditor = this.$refs.TagEditor.contains(event.target);
+                if (!clickedInsideTagEditor) {
+                    // Remove last tag when user clicks outside of TagSelection
+                    this.addedTags.pop();
+                    // Hide TagSelection and show "Add Tag" button
+                    this.userAddingTag = false;
+                }
+            }
         },
         async tagAdded(newTag) {
             // Either undelete an annotation, or create one (1) new annotation
@@ -197,6 +208,7 @@ export default {
             }
 
             this.userAddingTag = false;
+            document.body.removeEventListener('click', this.tagCanceled);
 
             this.$emit('tags-updated', existingAnnotation);
             if (this.onTagChange) {

src/plugins/inspectorViews/annotations/tags/TagSelection.vue

@@ -31,7 +31,6 @@
             class="c-tag-selection"
             :item-css-class="'icon-circle'"
             @onChange="tagSelected"
-            @autoCompleteBlur="autoCompleteBlur"
         />
     </template>
     <template v-else>
@@ -161,9 +160,6 @@ export default {
             if (tagAdded) {
                 this.$emit('tagAdded', tagAdded.id);
             }
-        },
-        autoCompleteBlur() {
-            this.$emit('tagBlurred');
         }
     }
 };