Add cancel adding tag mechanism and fix persistent options visible (#6273)

* Add cancel adding tag mechanism and fix persistent options visible

* Add functional test for cancel adding a tag

* Create addtag.visual.spec.js and move createNotebookAndEntry to appActions.js

* Remove createDomainObjectWithDefaults function from tags.e2e.spec.js

* Integrate Percy snapshots and remove assertions

* Move createNotebookAndEntry function back to tags.e2e.spec.js

* Update locator of Annotations tab, split helper function and add test.beforeEach

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

@@ -231,4 +231,25 @@ test.describe('Tagging in Notebooks @addInit', () => {
             await expect(page.locator(entryLocator)).toContainText("Driving");
         }
     });
+    test('Can cancel adding a tag', async ({ page }) => {
+        await createNotebookAndEntry(page);
+
+        // Click on Annotations tab
+        await page.locator('.c-inspector__tab', { hasText: "Annotations" }).click();
+
+        // Click on the "Add Tag" button
+        await page.locator('button:has-text("Add Tag")').click();
+
+        // 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)
+        await page.locator('div.c-inspect-properties__header:has-text("Tags")').click();
+
+        // Verify there is a button with text "Add Tag"
+        await expect(page.locator('button:has-text("Add Tag")')).toBeVisible();
+
+        // Verify the AutoComplete field is hidden
+        await expect(page.locator('[placeholder="Type to select tag"]')).toBeHidden();
+    });
 });

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

@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * 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

@@ -42,7 +42,7 @@
         ></div>
     </div>
     <div
-        v-if="!hideOptions"
+        v-if="!hideOptions && filteredOptions.length > 0"
         class="c-menu c-input--autocomplete__options"
         aria-label="Autocomplete Options"
         @blur="hideOptions = true"
@@ -230,10 +230,10 @@ export default {
             this.showFilteredOptions = false;
             this.autocompleteInputElement.select();
 
-            if (this.hideOptions) {
-                this.showOptions();
-            } else {
+            if (!this.hideOptions && this.filteredOptions.length > 0) {
                 this.hideOptions = true;
+            } else {
+                this.showOptions();
             }
 
         },
@@ -242,6 +242,7 @@ 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/ui/components/tags/TagEditor.vue

@@ -31,6 +31,7 @@
         :added-tags="addedTags"
         @tagRemoved="tagRemoved"
         @tagAdded="tagAdded"
+        @tagBlurred="tagBlurred"
     />
     <button
         v-show="!userAddingTag && !maxTagsAdded"
@@ -165,6 +166,12 @@ 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;
+        },
         async tagAdded(newTag) {
             // Either undelete an annotation, or create one (1) new annotation
             let existingAnnotation = this.annotations.find((annotation) => {

src/ui/components/tags/TagSelection.vue

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