fix(web): SearchInput keeps focus across debounced URL updates

The previous one-way `{value}` + manual `oninput` rewrite let Svelte
re-set the input's DOM value whenever navigation completed, which moved
the cursor (and on some browsers, blurred the input) mid-typing. Switch
to Svelte 5's `bind:value` — it skips DOM writes when the JS value
already matches the DOM, so the user's typing isn't disturbed.

The URL-resync `\$effect` is unchanged: it still updates `value` for
back/forward navigation but is a no-op during normal typing because the
debounce already wrote the matching URL.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-04-27 23:25:30 -04:00
parent ad56eb279f
commit 693135896e
+2 -3
View File
@@ -24,8 +24,7 @@
goto(`/search?q=${encodeURIComponent(trimmed)}`, { replaceState: onSearchPage });
}
function onInput(e: Event) {
value = (e.currentTarget as HTMLInputElement).value;
function onInput() {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
timeout = null;
@@ -50,7 +49,7 @@
type="search"
placeholder="Search artists, albums, tracks…"
aria-label="Search"
{value}
bind:value
oninput={onInput}
onkeydown={onKey}
class="w-full max-w-md rounded border border-border bg-surface px-3 py-1 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"