From e712477d2b2a9dd9b4053ffd3027beae50aa69b8 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 12 Jun 2026 19:31:39 +0200
Subject: [PATCH] fix(person): block submit while a life-date input is partial

A partial date (e.g. "14.03.") left the hidden ISO input empty, so
saving the edit form silently cleared a stored date. PersonLifeDateField
now delegates to the shared DateInput primitive (inline format error,
calendar validation) and sets a custom validity while the error is
present, so the browser blocks native submission for both person forms.
A full clear stays submittable - that is the intentional clear path.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/lib/person/PersonLifeDateField.svelte | 34 +++++-----
 .../person/PersonLifeDateField.svelte.spec.ts | 64 +++++++++++++++++++
 .../lib/shared/primitives/DateInput.svelte    | 13 +++-
 .../[id]/edit/PersonEditForm.svelte.test.ts   | 14 +++-
 4 files changed, 107 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/lib/person/PersonLifeDateField.svelte.spec.ts

diff --git a/frontend/src/lib/person/PersonLifeDateField.svelte b/frontend/src/lib/person/PersonLifeDateField.svelte
index 53a8e04f..0d56f36a 100644
--- a/frontend/src/lib/person/PersonLifeDateField.svelte
+++ b/frontend/src/lib/person/PersonLifeDateField.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { onMount } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
-import { isoToGerman, handleGermanDateInput } from '$lib/shared/utils/date';
+import DateInput from '$lib/shared/primitives/DateInput.svelte';
 import type { DatePrecision } from '$lib/shared/utils/documentDate';
 
 // Only DAY / MONTH / YEAR are offered for life dates: RANGE and SEASON make no
@@ -26,8 +26,9 @@ let {
 	initialPrecision?: string | null;
 } = $props();
 
-let display = $state('');
 let iso = $state('');
+let errorMessage = $state<string | null>(null);
+let inputEl = $state<HTMLInputElement | undefined>();
 let precision = $state<DatePrecision>('DAY');
 
 // Seed once at mount (WhoWhenSection pattern): a later load() rerun must not
@@ -35,7 +36,6 @@ let precision = $state<DatePrecision>('DAY');
 onMount(() => {
 	if (initialIso) {
 		iso = initialIso;
-		display = isoToGerman(initialIso);
 	}
 	const offered = PERSON_DATE_PRECISIONS.some((p) => p.value === initialPrecision);
 	if (offered) {
@@ -47,11 +47,11 @@ onMount(() => {
 	}
 });
 
-function handleInput(e: Event) {
-	const result = handleGermanDateInput(e);
-	display = result.display;
-	iso = result.iso;
-}
+// A partial date leaves the hidden ISO empty — submitting then would silently
+// clear a stored date. Block native submission until completed or fully emptied.
+$effect(() => {
+	inputEl?.setCustomValidity(errorMessage ?? '');
+});
 
 const controlCls =
 	'block min-h-[44px] w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring';
@@ -63,18 +63,20 @@ const controlCls =
 	</legend>
 	<div class="flex flex-col gap-2 sm:flex-row">
 		<div class="flex-1">
-			<input
+			<DateInput
+				bind:value={iso}
+				bind:errorMessage={errorMessage}
+				bind:inputEl={inputEl}
+				name={name}
 				id={name}
-				type="text"
-				inputmode="numeric"
 				placeholder="TT.MM.JJJJ"
-				maxlength="10"
-				aria-label={legend}
-				value={display}
-				oninput={handleInput}
+				ariaLabel={legend}
+				ariaDescribedby={errorMessage ? `${name}-error` : undefined}
 				class={controlCls}
 			/>
-			<input type="hidden" name={name} value={iso} />
+			{#if errorMessage}
+				<p id="{name}-error" class="mt-1 font-sans text-xs text-red-600">{errorMessage}</p>
+			{/if}
 		</div>
 		<div class="flex-1">
 			<select
diff --git a/frontend/src/lib/person/PersonLifeDateField.svelte.spec.ts b/frontend/src/lib/person/PersonLifeDateField.svelte.spec.ts
new file mode 100644
index 00000000..a01fe624
--- /dev/null
+++ b/frontend/src/lib/person/PersonLifeDateField.svelte.spec.ts
@@ -0,0 +1,64 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page, userEvent } from 'vitest/browser';
+import PersonLifeDateField from './PersonLifeDateField.svelte';
+import { m } from '$lib/paraglide/messages.js';
+
+afterEach(cleanup);
+
+const baseProps = {
+	name: 'birthDate',
+	legend: 'Geburtsdatum',
+	precisionLabel: 'Genauigkeit'
+};
+
+const visibleInput = () => page.getByLabelText('Geburtsdatum', { exact: true });
+const hiddenIso = () => document.querySelector<HTMLInputElement>('input[name="birthDate"]');
+
+describe('PersonLifeDateField', () => {
+	it('shows the format error and flags the input invalid for a partial date', async () => {
+		render(PersonLifeDateField, { props: baseProps });
+
+		await userEvent.fill(visibleInput(), '14.03.');
+
+		await expect.element(page.getByText(m.form_date_error())).toBeVisible();
+		const input = (await visibleInput().element()) as HTMLInputElement;
+		expect(input.checkValidity()).toBe(false);
+		expect(hiddenIso()?.value).toBe('');
+	});
+
+	it('clears error and custom validity when the input is fully emptied', async () => {
+		render(PersonLifeDateField, { props: { ...baseProps, initialIso: '1899-03-14' } });
+
+		await userEvent.fill(visibleInput(), '');
+
+		await expect.element(page.getByText(m.form_date_error())).not.toBeInTheDocument();
+		const input = (await visibleInput().element()) as HTMLInputElement;
+		expect(input.checkValidity()).toBe(true);
+		// Empty hidden ISO is the intentional clear path — the server action omits the pair.
+		expect(hiddenIso()?.value).toBe('');
+	});
+
+	it('keeps a stored date submittable when untouched', async () => {
+		render(PersonLifeDateField, {
+			props: { ...baseProps, initialIso: '1899-03-14', initialPrecision: 'DAY' }
+		});
+
+		await expect.element(visibleInput()).toHaveValue('14.03.1899');
+		const input = (await visibleInput().element()) as HTMLInputElement;
+		expect(input.checkValidity()).toBe(true);
+		expect(hiddenIso()?.value).toBe('1899-03-14');
+	});
+
+	it('becomes valid again once the partial date is completed', async () => {
+		render(PersonLifeDateField, { props: baseProps });
+
+		await userEvent.fill(visibleInput(), '14.03.');
+		await userEvent.fill(visibleInput(), '14.03.1899');
+
+		await expect.element(page.getByText(m.form_date_error())).not.toBeInTheDocument();
+		const input = (await visibleInput().element()) as HTMLInputElement;
+		expect(input.checkValidity()).toBe(true);
+		expect(hiddenIso()?.value).toBe('1899-03-14');
+	});
+});
diff --git a/frontend/src/lib/shared/primitives/DateInput.svelte b/frontend/src/lib/shared/primitives/DateInput.svelte
index ab234c81..1a4fa859 100644
--- a/frontend/src/lib/shared/primitives/DateInput.svelte
+++ b/frontend/src/lib/shared/primitives/DateInput.svelte
@@ -11,6 +11,11 @@ interface Props {
 	placeholder?: string;
 	class?: string;
 	onchange?: () => void;
+	ariaLabel?: string;
+	ariaDescribedby?: string;
+	// Escape hatch for callers that need the raw element, e.g. to set a custom
+	// validity and block native form submission while the date is partial.
+	inputEl?: HTMLInputElement;
 }
 
 let {
@@ -20,7 +25,10 @@ let {
 	id,
 	placeholder,
 	class: className = '',
-	onchange
+	onchange,
+	ariaLabel,
+	ariaDescribedby,
+	inputEl = $bindable()
 }: Props = $props();
 
 let display = $state(isoToGerman(value ?? ''));
@@ -76,10 +84,13 @@ function handleInput(e: Event) {
 </script>
 
 <input
+	bind:this={inputEl}
 	type="text"
 	inputmode="numeric"
 	maxlength="10"
 	id={id}
+	aria-label={ariaLabel}
+	aria-describedby={ariaDescribedby}
 	value={display}
 	placeholder={placeholder ?? m.form_placeholder_date()}
 	oninput={handleInput}
diff --git a/frontend/src/routes/persons/[id]/edit/PersonEditForm.svelte.test.ts b/frontend/src/routes/persons/[id]/edit/PersonEditForm.svelte.test.ts
index 1c30bb62..9bb41ab5 100644
--- a/frontend/src/routes/persons/[id]/edit/PersonEditForm.svelte.test.ts
+++ b/frontend/src/routes/persons/[id]/edit/PersonEditForm.svelte.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
+import { page, userEvent } from 'vitest/browser';
 import PersonEditForm from './PersonEditForm.svelte';
 
 afterEach(cleanup);
@@ -219,4 +219,16 @@ describe('PersonEditForm', () => {
 		const select = (await page.getByLabelText(/^generation$/i).element()) as HTMLSelectElement;
 		expect(select.value).toBe('');
 	});
+
+	// ─── partial-date guard (#812 review) ────────────────────────────────────────
+
+	it('blocks submission while a stored birth date is partially edited (no silent clear)', async () => {
+		render(PersonEditForm, { props: { person: personPersonal } });
+
+		await userEvent.fill(page.getByLabelText(/^geburtsdatum$/i), '14.03.');
+
+		const birthInput = (await page.getByLabelText(/^geburtsdatum$/i).element()) as HTMLInputElement;
+		expect(birthInput.checkValidity()).toBe(false);
+		await expect.element(page.getByText(/Bitte im Format TT\.MM\.JJJJ/)).toBeVisible();
+	});
 });