From b3f0a06f1fb2dc48c169e189dafcc2aada9e3fb6 Mon Sep 17 00:00:00 2001
From: Marco Schumacher <marco@schumacher.dev>
Date: Tue, 28 Jan 2025 14:15:41 +0100
Subject: [PATCH] fix: validatedClass propagation

---
 examples/form/src/App.tsx   |  3 ++-
 examples/form/src/index.css |  4 ++--
 src/react/form/form.tsx     | 17 +++++++++++++++--
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/examples/form/src/App.tsx b/examples/form/src/App.tsx
index bc40175..5645928 100644
--- 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
index 0fddca0..ed68c27 100644
--- 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
index 78966c6..8d06edb 100644
--- 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) {