diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md index 559e3ebd8..c692ea6b5 100644 --- a/docs/reference/classes/formapi.md +++ b/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(fieldMeta): Record #### 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) diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 526ae6fd9..164f9b0fa 100644 --- a/packages/form-core/src/FormApi.ts +++ b/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[] + ).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 diff --git a/packages/form-core/tests/FieldApi.spec.ts b/packages/form-core/tests/FieldApi.spec.ts index 590724c83..17be24dc1 100644 --- a/packages/form-core/tests/FieldApi.spec.ts +++ b/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.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 index 1dcb3fdc5..5738f69e2 100644 --- a/packages/form-core/tests/FormApi.spec.ts +++ b/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) +})