github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-06-01 01:07:04 +02:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity Graph

fix(editor): Focus 'key' input when variable modal is open (no-changelog) (#21762)

Browse Source 
Co-authored-by: Nikhil Kuriakose <nikhilkuria@gmail.com>
This commit is contained in:
Milorad FIlipović 2025-11-25 14:51:43 +01:00 committed by GitHub
parent b83c43f8dd
commit be598062fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.test.ts
View File

@ -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

14
packages/frontend/editor-ui/src/features/settings/environments.ee/components/VariableModal.vue
View File

@ -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"