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

TanStack · Oct 28, 2024 · fade2f0 · fade2f0
1 parent 457430b
commit fade2f0
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 47 deletions.
diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md
@@ -121,7 +121,7 @@ deleteField<TField>(field): void
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1083](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1083)
+[packages/form-core/src/FormApi.ts:1076](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1076)
 
 ***
 
@@ -147,7 +147,7 @@ Gets the field info of the specified field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:999](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L999)
+[packages/form-core/src/FormApi.ts:992](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L992)
 
 ***
 
@@ -173,7 +173,7 @@ Gets the metadata of the specified field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:990](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L990)
+[packages/form-core/src/FormApi.ts:983](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L983)
 
 ***
 
@@ -199,7 +199,7 @@ Gets the value of the specified field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:983](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L983)
+[packages/form-core/src/FormApi.ts:976](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L976)
 
 ***
 
@@ -217,17 +217,17 @@ Handles the form submission, performs validation, and calls the appropriate onSu
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:923](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L923)
+[packages/form-core/src/FormApi.ts:916](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L916)
 
 ***
 
 ### insertFieldValue()
 
 ```ts
 insertFieldValue<TField>(
-   field, 
-   index, 
-   value, 
+   field,
+   index,
+   value,
 opts?): Promise<void>
 ```
 
@@ -253,7 +253,7 @@ Inserts a value into an array field at the specified index, shifting the subsequ
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1115](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1115)
+[packages/form-core/src/FormApi.ts:1108](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1108)
 
 ***
 
@@ -277,9 +277,9 @@ mount(): void
 
 ```ts
 moveFieldValues<TField>(
-   field, 
-   index1, 
-   index2, 
+   field,
+   index1,
+   index2,
    opts?): void
 ```
 
@@ -305,16 +305,16 @@ Moves the value at the first specified index to the second specified index withi
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1233](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1233)
+[packages/form-core/src/FormApi.ts:1226](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1226)
 
 ***
 
 ### pushFieldValue()
 
 ```ts
 pushFieldValue<TField>(
-   field, 
-   value, 
+   field,
+   value,
    opts?): void
 ```
 
@@ -338,16 +338,16 @@ Pushes a value into an array field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1097](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1097)
+[packages/form-core/src/FormApi.ts:1090](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1090)
 
 ***
 
 ### removeFieldValue()
 
 ```ts
 removeFieldValue<TField>(
-   field, 
-   index, 
+   field,
+   index,
 opts?): Promise<void>
 ```
 
@@ -371,17 +371,17 @@ Removes a value from an array field at the specified index.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1168](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1168)
+[packages/form-core/src/FormApi.ts:1161](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1161)
 
 ***
 
 ### replaceFieldValue()
 
 ```ts
 replaceFieldValue<TField>(
-   field, 
-   index, 
-   value, 
+   field,
+   index,
+   value,
 opts?): Promise<void>
 ```
 
@@ -407,7 +407,7 @@ Replaces a value into an array field at the specified index.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1142](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1142)
+[packages/form-core/src/FormApi.ts:1135](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1135)
 
 ***
 
@@ -449,7 +449,7 @@ resetFieldMeta<TField>(fieldMeta): Record<TField, FieldMeta>
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1033](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1033)
+[packages/form-core/src/FormApi.ts:1026](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1026)
 
 ***
 
@@ -471,7 +471,7 @@ Updates the form's errorMap
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1257](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1257)
+[packages/form-core/src/FormApi.ts:1250](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1250)
 
 ***
 
@@ -499,16 +499,16 @@ Updates the metadata of the specified field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1018](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1018)
+[packages/form-core/src/FormApi.ts:1011](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1011)
 
 ***
 
 ### setFieldValue()
 
 ```ts
 setFieldValue<TField>(
-   field, 
-   updater, 
+   field,
+   updater,
    opts?): void
 ```
 
@@ -532,17 +532,17 @@ Sets the value of the specified field and optionally updates the touched state.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1057](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1057)
+[packages/form-core/src/FormApi.ts:1050](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1050)
 
 ***
 
 ### swapFieldValues()
 
 ```ts
 swapFieldValues<TField>(
-   field, 
-   index1, 
-   index2, 
+   field,
+   index1,
+   index2,
    opts?): void
 ```
 
@@ -568,7 +568,7 @@ Swaps the values at the specified indices within an array field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1207](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1207)
+[packages/form-core/src/FormApi.ts:1200](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1200)
 
 ***
 
@@ -620,8 +620,8 @@ Validates all fields in the form using the correct handlers for a given validati
 
 ```ts
 validateArrayFieldsStartingFrom<TField>(
-   field, 
-   index, 
+   field,
+   index,
 cause): Promise<ValidationError[]>
 ```
 

diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts
@@ -592,12 +592,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 }))
-        }
       })
     })
 
@@ -661,12 +655,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)
   }
 
@@ -938,6 +926,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')
 

diff --git a/packages/form-core/tests/FieldApi.spec.ts b/packages/form-core/tests/FieldApi.spec.ts
@@ -95,6 +95,28 @@ 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')
+    field.validate('blur')
+
+    expect(field.getMeta().isBlurred).toBe(true)
+  })
+
   it('should push an array value correctly', () => {
     const form = new FormApi({
       defaultValues: {

diff --git a/packages/form-core/tests/FormApi.spec.ts b/packages/form-core/tests/FormApi.spec.ts
@@ -2024,3 +2024,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)
+})