⚡ Using onClickOutside as a function in expression input

n8n-io · Aug 15, 2024 · 1dbce36 · 1dbce36
1 parent 4b52e21
commit 1dbce36
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 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
@@ -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
@@ -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'],