From 7840788d95c9426eb05e7fcd72b54bba067afbb5 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 26 Jul 2023 15:39:40 +0300
Subject: [PATCH] fix: fix tags dropdown in duplicate wf modal

---
 cypress/e2e/17-workflow-tags.cy.ts            |  4 +-
 cypress/pages/workflow.ts                     |  2 +-
 .../editor-ui/src/components/TagsDropdown.vue | 38 +++++++++++--------
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/cypress/e2e/17-workflow-tags.cy.ts b/cypress/e2e/17-workflow-tags.cy.ts
index ee7ed9a816..966a506e7b 100644
--- a/cypress/e2e/17-workflow-tags.cy.ts
+++ b/cypress/e2e/17-workflow-tags.cy.ts
@@ -85,9 +85,7 @@ describe('Workflow tags', () => {
 		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();
+		wf.getters.tagsInDropdown().filter('.selected').first().click();
 		cy.get('body').click(0, 0);
 		wf.getters.tagPills().should('have.length', TEST_TAGS.length - 1);
 	});
diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts
index 4961555e5b..72aca5977a 100644
--- a/cypress/pages/workflow.ts
+++ b/cypress/pages/workflow.ts
@@ -17,7 +17,7 @@ export class WorkflowPage extends BasePage {
 		nthTagPill: (n: number) =>
 			cy.get(`[data-test-id="workflow-tags-container"] span.tags > span:nth-child(${n})`),
 		tagsDropdown: () => cy.getByTestId('workflow-tags-dropdown'),
-		tagsInDropdown: () => cy.getByTestId('workflow-tags-dropdown').find('li').filter('.tag'),
+		tagsInDropdown: () => getVisibleSelect().find('li').filter('.tag'),
 		createTagButton: () => cy.getByTestId('new-tag-link'),
 		saveButton: () => cy.getByTestId('workflow-save-button'),
 		nodeCreatorSearchBar: () => cy.getByTestId('node-creator-search-bar'),
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index 6821aa32d3..08eb5499ce 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -5,7 +5,7 @@
 		v-on-click-outside="onClickOutside"
 	>
 		<n8n-select
-			:teleported="false"
+			:teleported="true"
 			:modelValue="appliedTags"
 			:loading="isLoading"
 			:placeholder="placeholder"
@@ -13,8 +13,9 @@
 			filterable
 			multiple
 			:allowCreate="createEnabled"
+			:reserve-keyword="false"
 			default-first-option
-			ref="select"
+			ref="selectRef"
 			loading-text="..."
 			popper-class="tags-dropdown"
 			@update:modelValue="onTagsUpdated"
@@ -26,7 +27,7 @@
 				:key="CREATE_KEY"
 				:value="CREATE_KEY"
 				class="ops"
-				ref="create"
+				ref="createRef"
 			>
 				<font-awesome-icon icon="plus-circle" />
 				<span>
@@ -48,7 +49,7 @@
 				:key="tag.id + '_' + i"
 				:label="tag.name"
 				class="tag"
-				ref="tag"
+				ref="tagRefs"
 			/>
 
 			<n8n-option :key="MANAGE_KEY" :value="MANAGE_KEY" class="ops manage-tags">
@@ -154,11 +155,13 @@ export default defineComponent({
 							emit('esc');
 						} else if (keyboardEvent.key === 'Enter' && filter.value.length === 0) {
 							preventUpdate.value = true;
-							emit('blur');
 
-							if (typeof selectRef.value?.blur === 'function') {
-								selectRef.value.blur();
-							}
+							// Disable blur event due to element-plus handler changes
+							// emit('blur');
+							//
+							// if (typeof selectRef.value?.blur === 'function') {
+							// 	selectRef.value.blur();
+							// }
 						}
 					});
 				}
@@ -207,8 +210,6 @@ export default defineComponent({
 				(value) => !allTags.value.find((tag) => tag.id === value) || value === CREATE_KEY,
 			);
 
-			console.log({ manage, create, selected });
-
 			if (manage) {
 				filter.value = '';
 				uiStore.openModal(TAGS_MANAGER_MODAL_KEY);
@@ -226,12 +227,13 @@ export default defineComponent({
 
 		function focusOnTopOption() {
 			// focus on create option
-			if (createRef.value?.hoverItem) {
-				createRef.value.hoverItem();
+			if (createRef.value?.focus) {
+				createRef.value.focus();
 			}
 			// focus on top option after filter
-			else if (tagRefs.value?.[0]?.hoverItem) {
-				tagRefs.value[0].hoverItem();
+			else if (tagRefs.value?.[0]?.$el.focus) {
+				tagRefs.value[0].$el.focus();
+				console.log('focusing', tagRefs.value[0].$el);
 			}
 		}
 
@@ -265,10 +267,14 @@ export default defineComponent({
 		}
 
 		function onClickOutside(e: Event) {
+			const tagsDropdown = document.querySelector('.tags-dropdown');
 			const tagsModal = document.querySelector('#tags-manager-modal');
-			const clickInsideTagsModal = tagsModal?.contains(e.target as Node);
 
-			if (!clickInsideTagsModal && e.type === 'click') {
+			const clickInsideTagsDropdowns =
+				tagsDropdown?.contains(e.target as Node) || tagsDropdown === e.target;
+			const clickInsideTagsModal = tagsModal?.contains(e.target as Node) || tagsModal === e.target;
+
+			if (!clickInsideTagsDropdowns && !clickInsideTagsModal && e.type === 'click') {
 				emit('blur');
 			}
 		}