From 1dbce362699854c4da09aa5420e02ae499bf64ce Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 15 Aug 2024 11:34:46 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Using=20`onClickOutside`=20as=20a?=
 =?UTF-8?q?=20function=20in=20expression=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...111-ado-support-pinned-data-in-expressions.cy.ts | 13 ++++++-------
 .../src/components/ExpressionParameterInput.vue     | 10 +++++-----
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/cypress/e2e/2111-ado-support-pinned-data-in-expressions.cy.ts b/cypress/e2e/2111-ado-support-pinned-data-in-expressions.cy.ts
index 50935178b03dc..6d2da55b32040 100644
--- a/cypress/e2e/2111-ado-support-pinned-data-in-expressions.cy.ts
+++ b/cypress/e2e/2111-ado-support-pinned-data-in-expressions.cy.ts
@@ -113,21 +113,20 @@ describe('ADO-2111 expressions should support pinned data', () => {
 		workflowPage.actions.openNode('NotPinnedWithExpressions');
 		ndv.getters.nodeParameters().find('parameter-expression-preview-value').should('not.exist');
 
-		ndv.getters.expressionExpanders().eq(0).click();
+		ndv.getters.parameterInput('value').eq(0).click();
 		ndv.getters
-			.expressionModalOutput()
-			.eq(0)
+			.inlineExpressionEditorOutput()
 			.should(
 				'have.text',
 				'[Execute node ‘PinnedSet’ for preview][Execute node ‘PinnedSet’ for preview][Execute node ‘PinnedSet’ for preview][Execute node ‘PinnedSet’ for preview][Execute node ‘PinnedSet’ for preview][Execute node ‘PinnedSet’ for preview][Execute previous nodes for preview][Execute previous nodes for preview][undefined]',
 			);
+
 		// close open expression
-		ndv.getters.expressionModalOutput().type('{esc}');
+		ndv.getters.inputLabel().eq(0).click();
 
-		ndv.getters.expressionExpanders().eq(1).click();
+		ndv.getters.parameterInput('value').eq(1).click();
 		ndv.getters
-			.expressionModalOutput()
-			.eq(1)
+			.inlineExpressionEditorOutput()
 			.should(
 				'have.text',
 				'0,0[Execute node ‘PinnedSet’ for preview][Execute node ‘PinnedSet’ for preview][Execute previous nodes for preview][Execute previous nodes for preview][Execute previous nodes for preview]',
diff --git a/packages/editor-ui/src/components/ExpressionParameterInput.vue b/packages/editor-ui/src/components/ExpressionParameterInput.vue
index 86e4c540a2ed9..cb0c22ec30745 100644
--- a/packages/editor-ui/src/components/ExpressionParameterInput.vue
+++ b/packages/editor-ui/src/components/ExpressionParameterInput.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue';
+import { onClickOutside } from '@vueuse/core';
 
 import ExpressionFunctionIcon from '@/components/ExpressionFunctionIcon.vue';
 import InlineExpressionEditorInput from '@/components/InlineExpressionEditor/InlineExpressionEditorInput.vue';
@@ -21,6 +22,7 @@ const segments = ref<Segment[]>([]);
 const editorState = ref<EditorState>();
 const selection = ref<SelectionRange>();
 const inlineInput = ref<InstanceType<typeof InlineExpressionEditorInput>>();
+const container = ref<HTMLDivElement>();
 
 type Props = {
 	path: string;
@@ -156,15 +158,13 @@ watch(isDragging, (newIsDragging) => {
 	}
 });
 
+onClickOutside(container, (event) => onBlur(event));
+
 defineExpose({ focus });
 </script>
 
 <template>
-	<div
-		v-on-click-outside="onBlur"
-		:class="$style['expression-parameter-input']"
-		@keydown.tab="onBlur"
-	>
+	<div ref="container" :class="$style['expression-parameter-input']" @keydown.tab="onBlur">
 		<div
 			:class="[
 				$style['all-sections'],