From d14c9376935468f842e16347a778420bc91eb35a Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 9 May 2026 09:11:29 +0200
Subject: [PATCH] fix(date-input): re-derive display when value prop changes
 externally
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`display` was initialised once and never updated, so the text box would
show a stale German date after the parent reset `value` (e.g. × reset
button or timeline drag). A guarded `$effect` re-derives `display` from
`value` whenever the two are out of sync while preserving mid-typing
partial dates (germanToIso returns '' for incomplete input, which matches
value='' during typing → no spurious re-derive).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/shared/primitives/DateInput.svelte    | 11 ++++++++++
 .../primitives/DateInput.svelte.spec.ts       | 20 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/frontend/src/lib/shared/primitives/DateInput.svelte b/frontend/src/lib/shared/primitives/DateInput.svelte
index 08fed63a..ab234c81 100644
--- a/frontend/src/lib/shared/primitives/DateInput.svelte
+++ b/frontend/src/lib/shared/primitives/DateInput.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { untrack } from 'svelte';
 import { isoToGerman, handleGermanDateInput, germanToIso } from '$lib/shared/utils/date';
 import { m } from '$lib/paraglide/messages.js';
 
@@ -24,6 +25,16 @@ let {
 
 let display = $state(isoToGerman(value ?? ''));
 
+// Re-derive display when value changes externally (e.g. timeline drag, reset nav).
+// Guard prevents overwriting while the user is mid-typing a partial date:
+// germanToIso returns '' for partial input, matching value '' → no re-derive.
+$effect(() => {
+	const externalIso = value ?? '';
+	if (germanToIso(untrack(() => display)) !== externalIso) {
+		display = isoToGerman(externalIso);
+	}
+});
+
 // ─── Validation helper ────────────────────────────────────────────────────
 function isCalendarValid(iso: string): boolean {
 	if (!iso) return false;
diff --git a/frontend/src/lib/shared/primitives/DateInput.svelte.spec.ts b/frontend/src/lib/shared/primitives/DateInput.svelte.spec.ts
index d8704aef..cb315f95 100644
--- a/frontend/src/lib/shared/primitives/DateInput.svelte.spec.ts
+++ b/frontend/src/lib/shared/primitives/DateInput.svelte.spec.ts
@@ -183,6 +183,26 @@ describe('DateInput – clearing the date', () => {
 	});
 });
 
+// ─── External value changes ───────────────────────────────────────────────────
+
+describe('DateInput – external value changes', () => {
+	it('clears display when value prop is reset to empty externally', async () => {
+		const { rerender } = render(DateInput, { value: '1920-01-01' });
+		const input = page.getByRole('textbox');
+		await expect.element(input).toHaveValue('01.01.1920');
+		await rerender({ value: '' });
+		await expect.element(input).toHaveValue('');
+	});
+
+	it('updates display when value prop changes to a new date externally', async () => {
+		const { rerender } = render(DateInput, { value: '1920-01-01' });
+		const input = page.getByRole('textbox');
+		await expect.element(input).toHaveValue('01.01.1920');
+		await rerender({ value: '1945-05-08' });
+		await expect.element(input).toHaveValue('08.05.1945');
+	});
+});
+
 // ─── Hidden input ─────────────────────────────────────────────────────────────
 
 describe('DateInput – hidden input for form submission', () => {