diff --git a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js index beb7d7209d..b11543872e 100644 --- a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js +++ b/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(); + }); }); diff --git a/e2e/tests/visual/addTag.visual.spec.js b/e2e/tests/visual/addTag.visual.spec.js new file mode 100644 index 0000000000..3b1cee33b2 --- /dev/null +++ b/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}')`); + }); +}); diff --git a/src/api/forms/components/controls/AutoCompleteField.vue b/src/api/forms/components/controls/AutoCompleteField.vue index bc39105267..ae571c5d20 100644 --- a/src/api/forms/components/controls/AutoCompleteField.vue +++ b/src/api/forms/components/controls/AutoCompleteField.vue @@ -42,7 +42,7 @@ >
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; } }, diff --git a/src/ui/components/tags/TagEditor.vue b/src/ui/components/tags/TagEditor.vue index 9aa852bb5c..64f2f108e2 100644 --- a/src/ui/components/tags/TagEditor.vue +++ b/src/ui/components/tags/TagEditor.vue @@ -31,6 +31,7 @@ :added-tags="addedTags" @tagRemoved="tagRemoved" @tagAdded="tagAdded" + @tagBlurred="tagBlurred" />