fix(editor): Autofocus Search in Move Folder Dialog (#14378)

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

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({

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());
+});
 </script>
 
 <template>