Allow tag cancelation (#6436)

* add e2e test

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

e2e/tests/functional/plugins/notebook/tags.e2e.spec.js

@@ -110,6 +110,30 @@ test.describe('Tagging in Notebooks @addInit', () => {
         await expect(page.locator('[aria-label="Autocomplete Options"]')).not.toContainText("Driving");
         await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Drilling");
     });
+    test('Can cancel adding tags', async ({ page }) => {
+        await createNotebookAndEntry(page);
+
+        // TODO can be removed with fix for https://github.com/nasa/openmct/issues/6411
+        await page.locator('[aria-label="Notebook Entry"].is-selected div.c-ne__text').click();
+
+        await selectInspectorTab(page, 'Annotations');
+
+        // Test canceling adding a tag after we click "Type to select tag"
+        await page.locator('button:has-text("Add Tag")').click();
+
+        await page.locator('[placeholder="Type to select tag"]').click();
+
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+
+        await expect(page.locator('button:has-text("Add Tag")')).toBeVisible();
+
+        // Test canceling adding a tag after we just click "Add Tag"
+        await page.locator('button:has-text("Add Tag")').click();
+
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+
+        await expect(page.locator('button:has-text("Add Tag")')).toBeVisible();
+    });
     test('Can search for tags and preview works properly', async ({ page }) => {
         await createNotebookEntryAndTags(page);
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();

e2e/tests/visual/addTag.visual.spec.js

@@ -1,68 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2023, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This test is dedicated to test the blur behavior of the add tag button.
- */
-
-const { test } = require("../../pluginFixtures");
-const percySnapshot = require('@percy/playwright');
-const { createDomainObjectWithDefaults } = require('../../appActions');
-
-test.describe("Visual - Check blur of Add Tag button", () => {
-
-    test.beforeEach(async ({ page }) => {
-        // Open a browser, navigate to the main page, and wait until all network events to resolve
-        await page.goto('./', { waitUntil: 'networkidle' });
-    });
-
-    test("Blur 'Add tag'", async ({ page, theme }) => {
-        createDomainObjectWithDefaults(page, { type: 'Notebook' });
-
-        await page.locator('text=To start a new entry, click here or drag and drop any object').click();
-        const entryLocator = `[aria-label="Notebook Entry Input"] >> nth = 0`;
-        await page.locator(entryLocator).click();
-        await page.locator(entryLocator).fill(`Entry 0`);
-        await page.locator(entryLocator).press('Enter');
-
-        // Click on Annotations tab
-        await page.locator('.c-inspector__tab', { hasText: "Annotations" }).click();
-
-        // Take snapshot of the notebook with the Annotations tab opened
-        await percySnapshot(page, `Notebook Annotation (theme: '${theme}')`);
-
-        // Click on the "Add Tag" button
-        await page.locator('button:has-text("Add Tag")').click();
-
-        // Take snapshot of the notebook with the AutoComplete field visible
-        await percySnapshot(page, `Notebook Add Tag (theme: '${theme}')`);
-
-        // Click inside the AutoComplete field
-        await page.locator('[placeholder="Type to select tag"]').click();
-
-        // Click on the "Tags" header (simulating a click outside the autocomplete field)
-        await page.locator('div.c-inspect-properties__header:has-text("Tags")').click();
-
-        // Take snapshot of the notebook with the AutoComplete field hidden and with the "Add Tag" button visible
-        await percySnapshot(page, `Notebook Annotation de-select blur (theme: '${theme}')`);
-    });
-});

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() {
+        tagCanceled(event) {
-            // Remove last tag when user clicks outside of TagSelection
+            if (this.$refs.TagEditor) {
-            this.addedTags.pop();
+                const clickedInsideTagEditor = this.$refs.TagEditor.contains(event.target);
-            // Hide TagSelection and show "Add Tag" button
+                if (!clickedInsideTagEditor) {
-            this.userAddingTag = false;
+                    // 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');
         }
     }
 };