From 56d79c919ee504457c8e8afc7841b291702f00fc Mon Sep 17 00:00:00 2001 From: Marcel Date: Mon, 30 Mar 2026 14:53:45 +0200 Subject: [PATCH] fix(PersonTypeahead): sync searchTerm when initialName prop changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit After a person swap the parent navigates to a new URL and the server returns swapped names. The component's searchTerm was only set once from initialName at mount time ($state(initialName) captures the initial value only). Adding a reactive $effect ensures the displayed name updates whenever initialName changes — fixing the swap button showing stale names. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/lib/components/PersonTypeahead.svelte | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/src/lib/components/PersonTypeahead.svelte b/frontend/src/lib/components/PersonTypeahead.svelte index 9e9f7971..3be05bc0 100644 --- a/frontend/src/lib/components/PersonTypeahead.svelte +++ b/frontend/src/lib/components/PersonTypeahead.svelte @@ -30,8 +30,16 @@ let { onfocused }: Props = $props(); +// searchTerm must be both prop-derived AND locally writable (user typing), so $state + +// $effect is the correct pattern here — writable $derived is read-only and won't work. +// eslint-disable-next-line svelte/prefer-writable-derived let searchTerm = $state(initialName); +// Sync display text when the selected person changes externally (e.g. swap, navigation). +$effect(() => { + searchTerm = initialName; +}); + $effect(() => { const suggested = suggestedName; if (suggested && !untrack(() => value)) {