fix: fix tags manager

cypress/e2e/17-workflow-tags.cy.ts

@@ -30,7 +30,7 @@ describe('Workflow tags', () => {
 		}
 		cy.contains('Done').click();
 
-		wf.getters.createTagButton().click();
+		wf.getters.tagsDropdown().click();
 		wf.getters.tagsInDropdown().should('have.length', 5);
 		wf.getters.tagPills().should('have.length', 0); // none attached
 	});
@@ -45,7 +45,7 @@ describe('Workflow tags', () => {
 		});
 
 		cy.contains('Done').click();
-		wf.getters.createTagButton().click();
+		wf.getters.tagsDropdown().click();
 		wf.getters.tagsInDropdown().should('have.length', 0); // none stored
 		wf.getters.tagPills().should('have.length', 0); // none attached
 	});
@@ -57,7 +57,8 @@ describe('Workflow tags', () => {
 
 		cy.contains('Create a tag').click();
 		cy.getByTestId('tags-table').find('input').type(first).type('{enter}');
-		cy.getByTestId('edit-tag-button').click({ force: true });
+		cy.getByTestId('tags-table').should('contain.text', first);
+		cy.getByTestId('edit-tag-button').eq(-1).click({ force: true });
 		cy.wait(300);
 		cy.getByTestId('tags-table')
 			.find('.el-input--large')
@@ -65,7 +66,7 @@ describe('Workflow tags', () => {
 			.type(' Updated')
 			.type('{enter}');
 		cy.contains('Done').click();
-		wf.getters.createTagButton().click();
+		wf.getters.tagsDropdown().click();
 		wf.getters.tagsInDropdown().should('have.length', 1); // one stored
 		wf.getters.tagsInDropdown().contains('Updated').should('exist');
 		wf.getters.tagPills().should('have.length', 0); // none attached
@@ -76,16 +77,18 @@ describe('Workflow tags', () => {
 		wf.actions.addTags(TEST_TAGS);
 		wf.getters.nthTagPill(1).click();
 		wf.getters.tagsDropdown().find('.el-tag__close').first().click();
-		cy.get('body').type('{enter}');
+		cy.get('body').click(0, 0);
 		wf.getters.tagPills().should('have.length', TEST_TAGS.length - 1);
 	});
 
-	it('should detach a tag inline by clicking on dropdown list item', () => {
+	it.only('should detach a tag inline by clicking on dropdown list item', () => {
 		wf.getters.createTagButton().click();
 		wf.actions.addTags(TEST_TAGS);
 		wf.getters.nthTagPill(1).click();
+		cy.wait(300);
+		wf.getters.tagsDropdown().click(0, 0);
 		wf.getters.tagsDropdown().find('li.selected').first().click();
-		cy.get('body').type('{enter}');
+		cy.get('body').click(0, 0);
 		wf.getters.tagPills().should('have.length', TEST_TAGS.length - 1);
 	});
 });

cypress/pages/workflow.ts

@@ -1,5 +1,6 @@
 import { META_KEY } from '../constants';
 import { BasePage } from './base';
+import { getVisibleSelect } from '../utils';
 
 export class WorkflowPage extends BasePage {
 	url = '/workflow/new';
@@ -84,7 +85,8 @@ export class WorkflowPage extends BasePage {
 		duplicateWorkflowModal: () => cy.getByTestId('duplicate-modal'),
 		nodeViewBackground: () => cy.getByTestId('node-view-background'),
 		nodeView: () => cy.getByTestId('node-view'),
-		inlineExpressionEditorInput: () => cy.getByTestId('inline-expression-editor-input').find('[role=textbox]'),
+		inlineExpressionEditorInput: () =>
+			cy.getByTestId('inline-expression-editor-input').find('[role=textbox]'),
 		inlineExpressionEditorOutput: () => cy.getByTestId('inline-expression-editor-output'),
 		zoomInButton: () => cy.getByTestId('zoom-in-button'),
 		zoomOutButton: () => cy.getByTestId('zoom-out-button'),
@@ -92,7 +94,8 @@ export class WorkflowPage extends BasePage {
 		executeWorkflowButton: () => cy.getByTestId('execute-workflow-button'),
 		clearExecutionDataButton: () => cy.getByTestId('clear-execution-data-button'),
 		stopExecutionButton: () => cy.getByTestId('stop-execution-button'),
-		stopExecutionWaitingForWebhookButton: () => cy.getByTestId('stop-execution-waiting-for-webhook-button'),
+		stopExecutionWaitingForWebhookButton: () =>
+			cy.getByTestId('stop-execution-waiting-for-webhook-button'),
 		nodeCredentialsSelect: () => cy.getByTestId('node-credentials-select'),
 		nodeCredentialsCreateOption: () => cy.getByTestId('node-credentials-select-item-new'),
 		nodeCredentialsEditButton: () => cy.getByTestId('credential-edit-button'),
@@ -138,17 +141,17 @@ export class WorkflowPage extends BasePage {
 
 			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
 			this.getters.nodeCreatorSearchBar().type('{enter}');
-			cy.wait(500)
+			cy.wait(500);
 			cy.get('body').then((body) => {
 				if (body.find('[data-test-id=node-creator]').length > 0) {
 					if (action) {
-						cy.contains(action).click()
+						cy.contains(action).click();
 					} else {
 						// Select the first action
-						cy.get('[data-keyboard-nav-type="action"]').eq(0).click()
+						cy.get('[data-keyboard-nav-type="action"]').eq(0).click();
 					}
 				}
-			})
+			});
 
 			if (!preventNdvClose) cy.get('body').type('{esc}');
 		},
@@ -161,7 +164,8 @@ export class WorkflowPage extends BasePage {
 		},
 		openTagManagerModal: () => {
 			this.getters.createTagButton().click();
-			this.getters.tagsDropdown().find('li.manage-tags').first().click();
+			this.getters.tagsDropdown().click();
+			getVisibleSelect().find('li.manage-tags').first().click();
 		},
 		openInlineExpressionEditor: () => {
 			cy.contains('Expression').invoke('show').click();
@@ -213,7 +217,7 @@ export class WorkflowPage extends BasePage {
 				this.getters.workflowTagsInput().type(tag);
 				this.getters.workflowTagsInput().type('{enter}');
 			});
-			cy.get('body').type('{enter}');
+			cy.get('body').click(0, 0);
 			// For a brief moment the Element UI tag component shows the tags as(+X) string
 			// so we need to wait for it to disappear
 			this.getters.workflowTagsContainer().should('not.contain', `+${tags.length}`);
@@ -245,7 +249,12 @@ export class WorkflowPage extends BasePage {
 		executeWorkflow: () => {
 			this.getters.executeWorkflowButton().click();
 		},
-		addNodeBetweenNodes: (sourceNodeName: string, targetNodeName: string, newNodeName: string, action?: string) => {
+		addNodeBetweenNodes: (
+			sourceNodeName: string,
+			targetNodeName: string,
+			newNodeName: string,
+			action?: string,
+		) => {
 			this.getters.getConnectionBetweenNodes(sourceNodeName, targetNodeName).first().realHover();
 			this.getters
 				.getConnectionActionsBetweenNodes(sourceNodeName, targetNodeName)
@@ -272,18 +281,10 @@ export class WorkflowPage extends BasePage {
 			this.getters.addStickyButton().click();
 		},
 		deleteSticky: () => {
-			this.getters.stickies().eq(0)
-				.realHover()
-				.find('[data-test-id="delete-sticky"]')
-				.click();
+			this.getters.stickies().eq(0).realHover().find('[data-test-id="delete-sticky"]').click();
 		},
 		editSticky: (content: string) => {
-			this.getters.stickies()
-				.dblclick()
-				.find('textarea')
-				.clear()
-				.type(content)
-				.type('{esc}');
+			this.getters.stickies().dblclick().find('textarea').clear().type(content).type('{esc}');
 		},
 	};
 }

packages/editor-ui/src/components/TagsDropdown.vue

@@ -1,7 +1,11 @@
 <template>
-	<div :class="{ 'tags-container': true, focused }" @keydown.stop>
+	<div
+		:class="{ 'tags-container': true, focused }"
+		@keydown.stop
+		v-on-click-outside="onClickOutside"
+	>
 		<n8n-select
-			:teleported="true"
+			:teleported="false"
 			:modelValue="appliedTags"
 			:loading="isLoading"
 			:placeholder="placeholder"
@@ -260,6 +264,15 @@ export default defineComponent({
 			});
 		}
 
+		function onClickOutside(e: Event) {
+			const tagsModal = document.querySelector('#tags-manager-modal');
+			const clickInsideTagsModal = tagsModal?.contains(e.target as Node);
+
+			if (!clickInsideTagsModal && e.type === 'click') {
+				emit('blur');
+			}
+		}
+
 		return {
 			i18n,
 			tags,
@@ -280,6 +293,7 @@ export default defineComponent({
 			filterOptions,
 			onVisibleChange,
 			onRemoveTag,
+			onClickOutside,
 			...useToast(),
 		};
 	},

packages/editor-ui/src/components/TagsManager/TagsManager.vue

@@ -1,5 +1,6 @@
 <template>
 	<Modal
+		id="tags-manager-modal"
 		:title="$locale.baseText('tagsManager.manageTags')"
 		:name="TAGS_MANAGER_MODAL_KEY"
 		:eventBus="modalBus"