From 7c45b63dfe58ea9e3f9e4b37a1e99e3406507be7 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Thu, 27 Jul 2023 10:00:14 +0200
Subject: [PATCH] fix(editor): Fix menu item event handling

---
 .../src/components/N8nMenu/Menu.vue           | 33 ++++++++++++-------
 .../src/components/N8nMenuItem/MenuItem.vue   | 28 +++++-----------
 2 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 7a429f6fd3..b5ed60260a 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -23,7 +23,7 @@
 						:tooltipDelay="tooltipDelay"
 						:mode="mode"
 						:activeTab="activeTab"
-						@select="onSelect"
+						:handle-select="onSelect"
 					/>
 				</el-menu>
 			</div>
@@ -38,7 +38,7 @@
 						:tooltipDelay="tooltipDelay"
 						:mode="mode"
 						:activeTab="activeTab"
-						@select="onSelect"
+						:handle-select="onSelect"
 					/>
 				</el-menu>
 				<div v-if="$slots.menuSuffix" :class="$style.menuSuffix">
@@ -139,17 +139,26 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		onSelect(option: string): void {
-			if (this.mode === 'tabs') {
-				this.activeTab = option;
+		onSelect(item: IMenuItem): void {
+			if (item && item.type === 'link' && item.properties) {
+				const href: string = item.properties.href;
+				if (!href) {
+					return;
+				}
+
+				if (item.properties.newWindow) {
+					window.open(href);
+				} else {
+					window.location.assign(item.properties.href);
+				}
 			}
-			this.$emit('select', option);
-			this.$emit('update:modelValue', option);
-		},
-	},
-	watch: {
-		modelValue(value: string) {
-			this.activeTab = value;
+
+			if (this.mode === 'tabs') {
+				this.activeTab = item.id;
+			}
+
+			this.$emit('select', item.id);
+			this.$emit('update:modelValue', item.id);
 		},
 	},
 });
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index c7f775c12f..007f5540df 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -22,14 +22,15 @@
 				<span :class="$style.label">{{ item.label }}</span>
 			</template>
 			<n8n-menu-item
-				v-for="item in availableChildren"
-				:key="item.id"
-				:item="item"
+				v-for="child in availableChildren"
+				:key="child.id"
+				:item="child"
 				:compact="compact"
 				:tooltipDelay="tooltipDelay"
 				:popperClass="popperClass"
 				:mode="mode"
 				:activeTab="activeTab"
+				:handle-select="handleSelect"
 			/>
 		</el-sub-menu>
 		<n8n-tooltip
@@ -50,7 +51,7 @@
 				}"
 				data-test-id="menu-item"
 				:index="item.id"
-				@click="onItemClick(item)"
+				@click="handleSelect(item)"
 			>
 				<n8n-icon
 					v-if="item.icon"
@@ -115,6 +116,9 @@ export default defineComponent({
 		activeTab: {
 			type: String,
 		},
+		handleSelect: {
+			type: Function as PropType<(item: IMenuItem) => void>,
+		},
 	},
 	computed: {
 		availableChildren(): IMenuItem[] {
@@ -156,22 +160,6 @@ export default defineComponent({
 				return item.id === this.activeTab;
 			}
 		},
-		onItemClick(item: IMenuItem) {
-			if (item && item.type === 'link' && item.properties) {
-				const href: string = item.properties.href;
-				if (!href) {
-					return;
-				}
-
-				if (item.properties.newWindow) {
-					window.open(href);
-				} else {
-					window.location.assign(item.properties.href);
-				}
-			}
-
-			this.$emit('select', item.id);
-		},
 	},
 });
 </script>