fix(editor): Fix NDV output tabs resetting on any click (#8808)

n8n-io · Mar 6, 2024 · 2b06477 · 2b06477
1 parent 5f54695
commit 2b06477
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/packages/editor-ui/src/components/ExpressionParameterInput.vue b/packages/editor-ui/src/components/ExpressionParameterInput.vue
@@ -149,9 +149,9 @@ export default defineComponent({
 
 			this.isFocused = false;
 
-			this.$emit('blur');
-
 			if (wasFocused) {
+				this.$emit('blur');
+
 				const telemetryPayload = createExpressionTelemetryPayload(
 					this.segments,
 					this.modelValue,

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
@@ -595,7 +595,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useToast } from '@/composables/useToast';
-import { isObject } from 'lodash-es';
+import { isEqual, isObject } from 'lodash-es';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import RunDataPinButton from '@/components/RunDataPinButton.vue';
@@ -1473,7 +1473,8 @@ export default defineComponent({
 		},
 	},
 	watch: {
-		node() {
+		node(newNode: INodeUi, prevNode: INodeUi) {
+			if (newNode.id === prevNode.id) return;
 			this.init();
 		},
 		hasNodeRun() {
@@ -1491,9 +1492,10 @@ export default defineComponent({
 			immediate: true,
 			deep: true,
 		},
-		jsonData(value: IDataObject[]) {
+		jsonData(data: IDataObject[], prevData: IDataObject[]) {
+			if (isEqual(data, prevData)) return;
 			this.refreshDataSize();
-			this.showPinDataDiscoveryTooltip(value);
+			this.showPinDataDiscoveryTooltip(data);
 		},
 		binaryData(newData: IBinaryKeyData[], prevData: IBinaryKeyData[]) {
 			if (newData.length && !prevData.length && this.displayMode !== 'binary') {

diff --git a/packages/editor-ui/src/components/__tests__/ExpressionParameterInput.test.ts b/packages/editor-ui/src/components/__tests__/ExpressionParameterInput.test.ts
@@ -33,4 +33,24 @@ describe('ExpressionParameterInput', () => {
 		await userEvent.click(getByTestId('expander'));
 		expect(emitted().modalOpenerClick).toEqual(expected);
 	});
+
+	test('it should only emit blur when input had focus', async () => {
+		const { getByTestId, emitted, baseElement } = renderComponent({
+			props: {
+				modelValue: '={{$json.foo}}',
+			},
+		});
+
+		// trigger click outside -> blur
+		await userEvent.click(baseElement);
+		expect(emitted('blur')).toBeUndefined();
+
+		// focus expression editor
+		await userEvent.click(
+			getByTestId('inline-expression-editor-input').querySelector('.cm-line') as Element,
+		);
+		// trigger click outside -> blur
+		await userEvent.click(baseElement);
+		expect(emitted('blur')).toHaveLength(1);
+	});
 });