diff --git a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte index 0940475d9..a7eb920d7 100644 --- a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte +++ b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte @@ -304,18 +304,15 @@ console.log('Edit'); await tick(); name = folders[folderId].name; - edit = true; + edit = true; await tick(); - // focus on the input and select all text - setTimeout(() => { - const input = document.getElementById(`folder-${folderId}-input`); - if (input) { - input.focus(); - input.select(); - } - }, 100); + const input = document.getElementById(`folder-${folderId}-input`); + + if (input) { + input.focus(); + } }; const exportHandler = async () => { @@ -404,6 +401,9 @@ id="folder-{folderId}-input" type="text" bind:value={name} + on:focus={(e) => { + e.target.select(); + }} on:blur={() => { nameUpdateHandler(); edit = false; @@ -437,7 +437,10 @@ > { - editHandler(); + // Requires a timeout to prevent the click event from closing the dropdown + setTimeout(() => { + editHandler(); + }, 200); }} on:delete={() => { showDeleteConfirm = true;