marcel/familienarchiv
1
0
Fork 0
Code Issues 107 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(search): prevent stale navigation from clobbering focused search input
Some checks failed
CI / E2E Tests (push) Waiting to run
Details
CI / Unit & Component Tests (push) Successful in 10m14s
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / E2E Tests (pull_request) Failing after 13m49s
Details
CI / Backend Unit Tests (pull_request) Failing after 13m59s
Details
CI / Unit & Component Tests (pull_request) Failing after 14m9s
Details

Browse Source 
The sync $effect on the home page unconditionally overwrote the local `q`
state with the URL value after every navigation. When users typed faster
than a navigation round-trip (debounce fires → goto() → data reloads),
the completed navigation wrote the stale URL value back into the input,
dropping the characters typed in the interim.

Guard the `q` assignment in the effect with a `qFocused` flag (set via
onfocus/onblur on the text input). Covers issue #34.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #41.
This commit is contained in:
Marcel
2026-03-20 20:57:23 +01:00
parent f950e4e826
commit acf6fc05ad
2 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/routes/+page.svelte
View File

@@ -11,6 +11,7 @@ import { formatDate } from '$lib/utils/date';
let { data } = $props();
let q = $state(untrack(() => data.filters?.q || ''));
let qFocused = $state(false);
let from = $state(untrack(() => data.filters?.from || ''));
let to = $state(untrack(() => data.filters?.to || ''));
let senderId = $state(untrack(() => data.filters?.senderId || ''));
@@ -61,9 +62,10 @@ $effect(() => {
}
});
// Sync local state with server data after navigation
// Sync local state with server data after navigation.
// Guard q: skip overwrite while the user is actively typing in the search field.
$effect(() => {
q = data.filters?.q || '';
if (!qFocused) q = data.filters?.q || '';
from = data.filters?.from || '';
to = data.filters?.to || '';
senderId = data.filters?.senderId || '';
@@ -85,6 +87,8 @@ $effect(() => {
type="text"
bind:value={q}
oninput={handleTextSearch}
onfocus={() => (qFocused = true)}
onblur={() => (qFocused = false)}
placeholder={m.docs_search_placeholder()}
class="block w-full border-gray-300 py-2.5 pr-10 pl-3 placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-brand-navy"
/>