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;

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', () => {