From 9ba244ae13dc2e36f0ab73a5bb930d2d5ed6be05 Mon Sep 17 00:00:00 2001
From: pwli0755 <lipw0755@gmial.com>
Date: Wed, 28 Aug 2024 23:15:32 +0800
Subject: [PATCH] fix auto revalidate

---
 examples/shadcn-ui/src/App.tsx                |  7 +++---
 .../src/components/conform/ToggleGroup.tsx    | 22 ++++++++++++-------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/examples/shadcn-ui/src/App.tsx b/examples/shadcn-ui/src/App.tsx
index 5d551746..69737214 100644
--- a/examples/shadcn-ui/src/App.tsx
+++ b/examples/shadcn-ui/src/App.tsx
@@ -44,7 +44,7 @@ const UserSubscriptionSchema = z.object({
 	accountType: z.enum(['personal', 'business'], {
 		required_error: 'You must select an account type',
 	}),
-	accountTypes: z.array(z.enum(['personal', 'business'])),
+	accountTypes: z.array(z.enum(['personal', 'business'])).min(1,'You must select at least one account type'),
 	interests: z
 		.array(z.string())
 		.min(3, 'You must select at least three interest'),
@@ -180,8 +180,9 @@ function App() {
 							{ value: 'business2', label: 'Business2' },
 						]}
 					/>
-					{fields.accountTypes.errors && (
-						<FieldError>{fields.accountTypes.errors}</FieldError>
+					{fields.accountTypes.allErrors && (
+						<FieldError>{
+							Object.values(fields.accountTypes.allErrors).flat()}</FieldError>
 					)}
 				</Field>
 				<Field>
diff --git a/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx b/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx
index da0a9b87..36597336 100644
--- a/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx
+++ b/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx
@@ -28,18 +28,24 @@ export const ToggleGroupConform = ({
 				onFocus={() => {
 					toggleGroupRef.current?.focus();
 				}}
-			/> : control.value ? (control.value as string[]).map(v => <input
-				// use the same name as the field, html form will handle the rest
-				name={meta.name} 
+			/> : <select
+				multiple
+				name={meta.name}
 				className="sr-only"
-				tabIndex={-1}
-				value={v}
-				// we just care the value to be submitted
-				onChange={() => { }}
+				ref={control.register}
 				onFocus={() => {
 					toggleGroupRef.current?.focus();
 				}}
-			/>) : null}
+				defaultValue={meta.initialValue}
+				tabIndex={-1}
+			>
+				{items.map((item) => (
+					<option value={item.value} key={item.value}>
+						{item.label}
+					</option>
+				))}
+			</select>
+			}
 
 			<ToggleGroup
 				{...props}