fix: only set fields to isBlurred after field blur or form submit

Signed-off-by: Pascal Küsgen <[email protected]>

docs/reference/classes/formapi.md

@@ -147,7 +147,7 @@ Gets the field info of the specified field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1013](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1013)
+[packages/form-core/src/FormApi.ts:1014](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1014)
 
 ***
 
@@ -173,7 +173,7 @@ Gets the metadata of the specified field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1004](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1004)
+[packages/form-core/src/FormApi.ts:1005](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1005)
 
 ***
 
@@ -199,7 +199,7 @@ Gets the value of the specified field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:997](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L997)
+[packages/form-core/src/FormApi.ts:998](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L998)
 
 ***
 
@@ -217,7 +217,7 @@ Handles the form submission, performs validation, and calls the appropriate onSu
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:937](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L937)
+[packages/form-core/src/FormApi.ts:925](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L925)
 
 ***
 
@@ -449,7 +449,7 @@ resetFieldMeta<TField>(fieldMeta): Record<TField, FieldMeta>
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1047](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1047)
+[packages/form-core/src/FormApi.ts:1048](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1048)
 
 ***
 
@@ -499,7 +499,7 @@ Updates the metadata of the specified field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1032](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1032)
+[packages/form-core/src/FormApi.ts:1033](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1033)
 
 ***
 
@@ -532,7 +532,7 @@ Sets the value of the specified field and optionally updates the touched state.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1071](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1071)
+[packages/form-core/src/FormApi.ts:1072](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1072)
 
 ***
 
@@ -645,7 +645,7 @@ Validates the children of a specified array in the form starting from a given in
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:625](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L625)
+[packages/form-core/src/FormApi.ts:619](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L619)
 
 ***
 
@@ -673,4 +673,4 @@ Validates a specified field in the form using the correct handlers for a given v
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:664](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L664)
+[packages/form-core/src/FormApi.ts:658](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L658)

packages/form-core/src/FormApi.ts

@@ -606,12 +606,6 @@ export class FormApi<
           // Mark them as touched
           field.instance.setMeta((prev) => ({ ...prev, isTouched: true }))
         }
-
-        // If any fields are not blurred
-        if (!field.instance.state.meta.isBlurred) {
-          // Mark them as blurred
-          field.instance.setMeta((prev) => ({ ...prev, isBlurred: true }))
-        }
       })
     })
 
@@ -675,12 +669,6 @@ export class FormApi<
       fieldInstance.setMeta((prev) => ({ ...prev, isTouched: true }))
     }
 
-    // If the field is not blurred (same logic as in validateAllFields)
-    if (!fieldInstance.state.meta.isBlurred) {
-      // Mark it as blurred
-      fieldInstance.setMeta((prev) => ({ ...prev, isBlurred: true }))
-    }
-
     return fieldInstance.validate(cause)
   }
 
@@ -952,6 +940,19 @@ export class FormApi<
       this.store.setState((prev) => ({ ...prev, isSubmitting: false }))
     }
 
+    // Set all fields to blurred
+    this.store.batch(() => {
+      void (
+        Object.values(this.fieldInfo) as FieldInfo<any, TFormValidator>[]
+      ).forEach((field) => {
+        if (!field.instance) return
+
+        if (!field.instance.state.meta.isBlurred) {
+          field.instance.setMeta((prev) => ({ ...prev, isBlurred: true }))
+        }
+      })
+    })
+
     // Validate all fields
     await this.validateAllFields('submit')
 
@@ -1080,7 +1081,6 @@ export class FormApi<
         this.setFieldMeta(field, (prev) => ({
           ...prev,
           isTouched: true,
-          isBlurred: true,
           isDirty: true,
           errorMap: {
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

packages/form-core/tests/FieldApi.spec.ts

@@ -95,6 +95,29 @@ describe('field api', () => {
     expect(field.getValue()).toBe('other')
   })
 
+  it('should set isBlurred correctly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test'],
+      },
+    })
+    form.mount()
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+    })
+    field.mount()
+
+    expect(field.getMeta().isBlurred).toBe(false)
+
+    field.pushValue('other')
+    expect(field.getMeta().isBlurred).toBe(false)
+
+    field.handleBlur()
+    expect(field.getMeta().isBlurred).toBe(true)
+  })
+
   it('should push an array value correctly', () => {
     const form = new FormApi({
       defaultValues: {

packages/form-core/tests/FormApi.spec.ts

@@ -2053,3 +2053,24 @@ describe('form api', () => {
     expect(passconfirmField.state.meta.errors.length).toBe(0)
   })
 })
+
+it('should update the onBlur state of the fields when the form is submitted', async () => {
+  const form = new FormApi({
+    defaultValues: {
+      firstName: '',
+    },
+  })
+
+  const field = new FieldApi({
+    form,
+    name: 'firstName',
+  })
+
+  field.mount()
+
+  expect(field.state.meta.isBlurred).toBe(false)
+
+  await form.handleSubmit()
+
+  expect(field.state.meta.isBlurred).toBe(true)
+})