fix(rename): imperatively focus + select rename inputs
Svelte's native autofocus attribute is unreliable for inputs rendered via conditional blocks (prior smoke-test fixed this for the new-list input). Apply the same bind:this + $effect pattern to the list-rename input (TasksScreen) and the workspace-rename input (SettingsScreen), and select() the existing text so typing replaces the old name cleanly.
This commit is contained in:
parent
6283f9ab2c
commit
391c42aa18
|
|
@ -19,9 +19,19 @@
|
|||
|
||||
let renaming = $state(false);
|
||||
let renameValue = $state("");
|
||||
let renameInput = $state<HTMLInputElement | null>(null);
|
||||
let showKebab = $state(false);
|
||||
let confirmRename = $state(false);
|
||||
|
||||
// Imperative focus — Svelte's native autofocus attribute is unreliable
|
||||
// for inputs that appear only via conditional blocks.
|
||||
$effect(() => {
|
||||
if (renaming && renameInput) {
|
||||
renameInput.focus();
|
||||
renameInput.select();
|
||||
}
|
||||
});
|
||||
|
||||
// Load stored credentials exactly once for this workspace. Previously this
|
||||
// ran on every `ws.webdav_url` change, which silently clobbered in-progress
|
||||
// user edits whenever any other setting updated the config.
|
||||
|
|
@ -133,11 +143,11 @@
|
|||
{#if renaming}
|
||||
<input
|
||||
type="text"
|
||||
bind:this={renameInput}
|
||||
bind:value={renameValue}
|
||||
class="w-full bg-transparent text-xl font-bold outline-none"
|
||||
onkeydown={(e) => { if (e.key === "Enter") handleRename(); if (e.key === "Escape") { renaming = false; } }}
|
||||
onblur={handleRename}
|
||||
autofocus
|
||||
/>
|
||||
{:else}
|
||||
<p class="text-xl font-bold">{ws?.name}</p>
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@
|
|||
let completedVisible = $state(false);
|
||||
let renamingListId = $state<string | null>(null);
|
||||
let renameValue = $state("");
|
||||
let renameListInput = $state<HTMLInputElement | null>(null);
|
||||
let showListMenu = $state(false);
|
||||
let showSubtasks = $state(false);
|
||||
let confirmDeleteList = $state(false);
|
||||
|
|
@ -85,6 +86,14 @@
|
|||
if (showNewList && newListInput) newListInput.focus();
|
||||
});
|
||||
|
||||
// Same imperative-focus trick for the inline list-rename input.
|
||||
$effect(() => {
|
||||
if (renamingListId && renameListInput) {
|
||||
renameListInput.focus();
|
||||
renameListInput.select();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
async function handleNewList() {
|
||||
if (!newListName.trim()) return;
|
||||
|
|
@ -631,11 +640,11 @@
|
|||
{#if renamingListId === app.activeListId}
|
||||
<input
|
||||
type="text"
|
||||
bind:this={renameListInput}
|
||||
bind:value={renameValue}
|
||||
class="w-full bg-transparent text-xl font-bold outline-none"
|
||||
onkeydown={(e) => { if (e.key === "Enter") handleRenameList(); if (e.key === "Escape") renamingListId = null; }}
|
||||
onblur={handleRenameList}
|
||||
autofocus
|
||||
/>
|
||||
{:else}
|
||||
<p class="text-xl font-bold">{app.activeList?.title ?? "Tasks"}</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue