fix: validatedClass propagation

schummar · Jan 28, 2025 · b3f0a06 · b3f0a06
1 parent 6718e54
commit b3f0a06
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/examples/form/src/App.tsx b/examples/form/src/App.tsx
@@ -15,11 +15,12 @@ const { Form, Field } = createForm<{ a: string; b: string }>({
       required: (value) => !!value,
     },
   },
+  validatedClass: 'valid-foo',
 });
 
 export default function App() {
   return (
-    <Form onSubmit={(_e, form) => form.reset()}>
+    <Form onSubmit={(_e, form) => form.reset()} validatedClass="valid-bar">
       <Content />
     </Form>
   );

diff --git a/examples/form/src/index.css b/examples/form/src/index.css
@@ -1,4 +1,4 @@
-form.validated input:invalid,
-form.validated input:invalid ~ fieldset {
+form.valid-bar input:invalid,
+form.valid-bar input:invalid ~ fieldset {
   box-shadow: 0 0 5px red;
 }
diff --git a/src/react/form/form.tsx b/src/react/form/form.tsx
@@ -192,7 +192,7 @@ function FormContainer({
       {...formProps}
       className={[
         formProps.className,
-        hasTriggeredValidations ? (form.options.validatedClass ?? 'validated') : undefined,
+        hasTriggeredValidations ? (formInstance.options.validatedClass ?? 'validated') : undefined,
       ]
         .filter(Boolean)
         .join(' ')}
@@ -391,6 +391,7 @@ export class Form<TDraft, TOriginal extends TDraft = TDraft> {
     urlState,
     autoSave,
     transform,
+    validatedClass,
     ...formProps
   }: {
     original?: TOriginal;
@@ -406,6 +407,7 @@ export class Form<TDraft, TOriginal extends TDraft = TDraft> {
       localizeError: localizeError ?? this.options.localizeError,
       autoSave: autoSave ?? this.options.autoSave,
       transform: transform ?? this.options.transform,
+      validatedClass: validatedClass ?? this.options.validatedClass,
     };
 
     const formState = useMemo(() => {
@@ -488,7 +490,18 @@ export class Form<TDraft, TOriginal extends TDraft = TDraft> {
           formState.set('hasTriggeredValidations', false);
         },
       } satisfies FormContext<TDraft, TOriginal>;
-    }, [formState, derivedState, original, defaultValue, validations, localizeError, urlState]);
+    }, [
+      formState,
+      derivedState,
+      original,
+      defaultValue,
+      validations,
+      localizeError,
+      urlState,
+      autoSave,
+      transform,
+      validatedClass,
+    ]);
 
     useEffect(() => {
       if (urlState) {