From be598062fb8d1b7bbce7fe72afe90016b1c6fcde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Tue, 25 Nov 2025 14:51:43 +0100
Subject: [PATCH] fix(editor): Focus 'key' input when variable modal is open
 (no-changelog) (#21762)

Co-authored-by: Nikhil Kuriakose <nikhilkuria@gmail.com>
---
 .../components/VariableModal.test.ts               |  7 ++++---
 .../environments.ee/components/VariableModal.vue   | 14 +++++++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.test.ts b/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.test.ts
index 56dbec6f301..bf7f18f1458 100644
--- a/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.test.ts
+++ b/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.test.ts
@@ -368,8 +368,9 @@ describe('VariableModal', () => {
 			if (!valueInput) throw new Error('Input not found');
 
 			// Just change the value, not the key
+			await userEvent.click(valueInput);
 			await userEvent.clear(valueInput);
-			await userEvent.type(valueInput, 'new value');
+			await userEvent.type(valueInput, 'new value', { delay: 10 });
 
 			// Should not show duplicate error for own key
 			expect(saveButton).toBeEnabled();
@@ -488,7 +489,7 @@ describe('VariableModal', () => {
 			if (!keyInput || !valueInput) throw new Error('Inputs not found');
 
 			await userEvent.type(keyInput, 'NEW_VAR');
-			await userEvent.type(valueInput, 'value');
+			await userEvent.type(valueInput, 'value', { delay: 10 });
 			await userEvent.click(saveButton);
 
 			// Give time for the async operation to complete
@@ -525,7 +526,7 @@ describe('VariableModal', () => {
 			if (!valueInput) throw new Error('Input not found');
 
 			await userEvent.clear(valueInput);
-			await userEvent.type(valueInput, 'new value');
+			await userEvent.type(valueInput, 'new value', { delay: 10 });
 			await userEvent.click(saveButton);
 
 			// Give time for the async operation to complete
diff --git a/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.vue b/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.vue
index 862fdb0bac6..bffebbe78e4 100644
--- a/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.vue
+++ b/packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Modal from '@/app/components/Modal.vue';
 import { VARIABLE_MODAL_KEY } from '../environments.constants';
-import { computed, reactive, ref } from 'vue';
+import { computed, reactive, ref, onMounted, nextTick } from 'vue';
 import { useUIStore } from '@/app/stores/ui.store';
 import { createEventBus } from '@n8n/utils/event-bus';
 import { useToast } from '@/app/composables/useToast';
@@ -41,6 +41,7 @@ const projectsStore = useProjectsStore();
 const modalBus = createEventBus();
 const loading = ref(false);
 const validateOnBlur = ref(false);
+const keyInputRef = ref<InstanceType<typeof N8nFormInput> | null>(null);
 
 const keyValidationRules: Array<Rule | RuleGroup> = [
 	{ name: 'REQUIRED' },
@@ -216,6 +217,16 @@ async function handleSubmit() {
 		loading.value = false;
 	}
 }
+
+onMounted(async () => {
+	await nextTick();
+	const input = keyInputRef.value?.inputRef;
+	if (input) {
+		requestAnimationFrame(() => {
+			input.focus();
+		});
+	}
+});
 </script>
 
 <template>
@@ -232,6 +243,7 @@ async function handleSubmit() {
 		<template #content>
 			<div :class="$style.form" @keyup.enter="handleSubmit">
 				<N8nFormInput
+					ref="keyInputRef"
 					v-model="form.key"
 					:label="i18n.baseText('variables.modal.key.label')"
 					name="key"