From 52e9176d5a7092d03315eb0804d9bef0db733ebf Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Fri, 5 Sep 2025 14:18:40 -0700
Subject: [PATCH] radio group: fix live validation after invalid

---
 src/lib/RadioGroup.svelte            | 17 +++++++++++++++--
 src/routes/statemachine/+page.svelte | 13 ++++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/lib/RadioGroup.svelte b/src/lib/RadioGroup.svelte
index acafb67..0cf37a0 100644
--- a/src/lib/RadioGroup.svelte
+++ b/src/lib/RadioGroup.svelte
@@ -23,8 +23,20 @@
 		...props
 	}: Props = $props();
 	let valid = $state(true);
+	let hiddenInput: HTMLInputElement;
 
-	const group = new RadioGroup(props);
+	const group = new RadioGroup({
+		...props,
+		onValueChange(active) {
+			// call any passed in handler
+			props.onValueChange?.(active);
+
+			requestAnimationFrame(() => {
+				// send keyboard event to trigger validation
+				hiddenInput?.dispatchEvent(new KeyboardEvent('keyup'));
+			});
+		}
+	});
 	const isVert = $derived(group.orientation === 'vertical');
 </script>
 
@@ -69,8 +81,9 @@
 	</div>
 	<input
 		{...group.hiddenInput}
-		use:validate={{ required }}
+		use:validate={{ required, autovalOnInvalid: true }}
 		onvalidate={(e) => (valid = e.detail.valid)}
+		bind:this={hiddenInput}
 	/>
 
 	{#if required}
diff --git a/src/routes/statemachine/+page.svelte b/src/routes/statemachine/+page.svelte
index 65c2ada..cf2ca46 100644
--- a/src/routes/statemachine/+page.svelte
+++ b/src/routes/statemachine/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import PhoneInput from '$lib/PhoneInput.svelte';
+	import RadioGroup from '$lib/RadioGroup.svelte';
 	import StateMachine, { type StateMachinePage } from '$lib/StateMachine.svelte';
 	import TextInput from '$lib/TextInput.svelte';
 	import { ArrowRight, Check } from 'phosphor-svelte';
 
 	let stateMachineRef: StateMachine;
-	let index = $state(1);
+	let index = $state(0);
 
 	const pages: StateMachinePage[] = [
 		{
@@ -79,6 +80,16 @@
 
 {#snippet firstPage()}
 	<TextInput label="What's your name?" validate={{ required: true }} />
+
+	<RadioGroup
+		label="What's your favorite color?"
+		options={[
+			{ label: 'Red', value: 'red' },
+			{ label: 'Blue', value: 'blue' },
+			{ label: 'Green', value: 'green' }
+		]}
+		required={true}
+	/>
 {/snippet}
 
 {#snippet secondPage()}