From 693135896e1d5971b4d53c5d6c01cebe2745cc5d Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 27 Apr 2026 23:25:30 -0400
Subject: [PATCH] fix(web): SearchInput keeps focus across debounced URL
 updates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 web/src/lib/components/SearchInput.svelte | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/SearchInput.svelte b/web/src/lib/components/SearchInput.svelte
index f1755709..2708d12d 100644
--- a/web/src/lib/components/SearchInput.svelte
+++ b/web/src/lib/components/SearchInput.svelte
@@ -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"