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

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

Author: Pascalmh

packages/form-core/src/FormApi.ts

@@ -640,12 +640,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 }))
-        }
       })
     })
 
@@ -709,12 +703,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)
   }
 
@@ -986,6 +974,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 form and all fields
     await this.validateAllFields('submit')
 
@@ -1113,7 +1114,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,52 @@ describe('field api', () => {
     expect(field.getValue()).toBe('other')
   })
 
+  it('should set isBlurred correctly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        firstName: '',
+      },
+    })
+    form.mount()
+
+    const field = new FieldApi({
+      form,
+      name: 'firstName',
+    })
+    field.mount()
+
+    expect(field.getMeta().isBlurred).toBe(false)
+
+    field.setValue('Bob')
+    expect(field.getMeta().isBlurred).toBe(false)
+
+    field.handleBlur()
+    expect(field.getMeta().isBlurred).toBe(true)
+  })
+
+  it('should set isBlurred correctly for arrays', () => {
+    const form = new FormApi({
+      defaultValues: {
+        firstNames: ['Bob'],
+      },
+    })
+    form.mount()
+
+    const field = new FieldApi({
+      form,
+      name: 'firstNames',
+    })
+    field.mount()
+
+    expect(field.getMeta().isBlurred).toBe(false)
+
+    field.pushValue('Bill')
+    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

@@ -2354,3 +2354,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)
+})