From d60ed746bb5477498ab29d5c8b6b7fc63e6065e5 Mon Sep 17 00:00:00 2001 From: Charlie Kolb Date: Mon, 7 Apr 2025 10:56:05 +0200 Subject: [PATCH] fix(editor): Autofocus Search in Move Folder Dialog (#14378) --- cypress/composables/folders.ts | 4 ++-- .../@n8n/design-system/src/components/N8nSelect/Select.vue | 7 +++++-- .../src/components/Folders/MoveToFolderDropdown.vue | 6 +++++- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/cypress/composables/folders.ts b/cypress/composables/folders.ts index ab710a279d..eec01873ab 100644 --- a/cypress/composables/folders.ts +++ b/cypress/composables/folders.ts @@ -448,9 +448,9 @@ function moveFolder(folderName: string, destinationName: string) { cy.intercept('PATCH', '/rest/projects/**').as('moveFolder'); getMoveFolderModal().should('be.visible'); getMoveFolderModal().find('h1').first().contains(`Move "${folderName}" to another folder`); - getMoveToFolderDropdown().click(); // Try to find current folder in the dropdown - getMoveToFolderInput().type(folderName, { delay: 50 }); + // This tests that auto-focus worked as expected + cy.focused().type(folderName, { delay: 50 }); // Should not be available getEmptyFolderDropdownMessage('No folders found').should('exist'); // Select destination folder diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.vue b/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.vue index fc62e3cc16..875bfb788a 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.vue @@ -98,8 +98,11 @@ const blur = () => { const focusOnInput = () => { if (!innerSelect.value) return; - const inputRef = innerSelect.value.$refs.input as HTMLInputElement | undefined; - inputRef?.focus(); + const inputRef = innerSelect.value.$refs.selectWrapper as HTMLInputElement; + + const inputElement = inputRef?.querySelector('input'); + if (inputElement) inputElement.focus(); + else inputRef?.focus(); }; defineExpose({ diff --git a/packages/frontend/editor-ui/src/components/Folders/MoveToFolderDropdown.vue b/packages/frontend/editor-ui/src/components/Folders/MoveToFolderDropdown.vue index ebdcbf1b78..aafa70a086 100644 --- a/packages/frontend/editor-ui/src/components/Folders/MoveToFolderDropdown.vue +++ b/packages/frontend/editor-ui/src/components/Folders/MoveToFolderDropdown.vue @@ -5,7 +5,7 @@ import { useFoldersStore } from '@/stores/folders.store'; import { useProjectsStore } from '@/stores/projects.store'; import { type ProjectIcon as ItemProjectIcon, ProjectTypes } from '@/types/projects.types'; import { N8nSelect } from '@n8n/design-system'; -import { computed, ref } from 'vue'; +import { computed, onMounted, ref } from 'vue'; /** * This component is used to select a folder to move a resource (folder or workflow) to. @@ -108,6 +108,10 @@ const onFolderSelected = (folderId: string) => { type: selectedFolder.resource, }); }; + +onMounted(() => { + void setTimeout(() => moveFolderDropdown.value?.focusOnInput()); +});