Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add isBlurred field state #938

Merged
merged 1 commit into from
Sep 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/form-core/src/FieldApi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,10 @@ export type FieldMeta = {
* A flag indicating whether the field has been touched.
*/
isTouched: boolean
/**
* A flag indicating whether the field has been blurred.
*/
isBlurred: boolean
/**
* A flag that is `true` if the field's value has not been modified by the user. Opposite of `isDirty`.
*/
Expand Down Expand Up @@ -456,6 +460,7 @@ export class FieldApi<
meta: this._getMeta() ?? {
isValidating: false,
isTouched: false,
isBlurred: false,
isDirty: false,
isPristine: true,
errors: [],
Expand Down Expand Up @@ -625,6 +630,7 @@ export class FieldApi<
({
isValidating: false,
isTouched: false,
isBlurred: false,
isDirty: false,
isPristine: true,
errors: [],
Expand Down Expand Up @@ -1001,6 +1007,9 @@ export class FieldApi<
this.setMeta((prev) => ({ ...prev, isTouched: true }))
this.validate('change')
}
if (!this.state.meta.isBlurred) {
this.setMeta((prev) => ({ ...prev, isBlurred: true }))
}
this.validate('blur')
}

Expand Down
21 changes: 21 additions & 0 deletions packages/form-core/src/FormApi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,10 @@ export type FormState<TFormData> = {
* A boolean indicating if any of the form fields have been touched.
*/
isTouched: boolean
/**
* A boolean indicating if any of the form fields have been blurred.
*/
isBlurred: boolean
/**
* A boolean indicating if any of the form's fields' values have been modified by the user. `True` if the user have modified at least one of the fields. Opposite of `isPristine`.
*/
Expand Down Expand Up @@ -305,6 +309,7 @@ function getDefaultFormState<TFormData>(
isSubmitted: defaultState.isSubmitted ?? false,
isSubmitting: defaultState.isSubmitting ?? false,
isTouched: defaultState.isTouched ?? false,
isBlurred: defaultState.isBlurred ?? false,
isPristine: defaultState.isPristine ?? true,
isDirty: defaultState.isDirty ?? false,
isValid: defaultState.isValid ?? false,
Expand Down Expand Up @@ -388,6 +393,7 @@ export class FormApi<
)

const isTouched = fieldMetaValues.some((field) => field?.isTouched)
const isBlurred = fieldMetaValues.some((field) => field?.isBlurred)

const isDirty = fieldMetaValues.some((field) => field?.isDirty)
const isPristine = !isDirty
Expand All @@ -410,6 +416,7 @@ export class FormApi<
isValid,
canSubmit,
isTouched,
isBlurred,
isPristine,
isDirty,
}
Expand Down Expand Up @@ -553,6 +560,12 @@ 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 }))
}
})
})

Expand Down Expand Up @@ -616,6 +629,12 @@ 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)
}

Expand Down Expand Up @@ -983,6 +1002,7 @@ export class FormApi<
acc[fieldKey] = {
isValidating: false,
isTouched: false,
isBlurred: false,
isDirty: false,
isPristine: true,
errors: [],
Expand All @@ -1009,6 +1029,7 @@ export class FormApi<
this.setFieldMeta(field, (prev) => ({
...prev,
isTouched: true,
isBlurred: true,
isDirty: true,
}))
}
Expand Down
9 changes: 8 additions & 1 deletion packages/form-core/tests/FieldApi.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ describe('field api', () => {

expect(field.getMeta()).toEqual({
isTouched: false,
isBlurred: false,
isValidating: false,
isPristine: true,
isDirty: false,
Expand All @@ -56,11 +57,17 @@ describe('field api', () => {
const field = new FieldApi({
form,
name: 'name',
defaultMeta: { isTouched: true, isDirty: true, isPristine: false },
defaultMeta: {
isTouched: true,
isDirty: true,
isPristine: false,
isBlurred: true,
},
})

expect(field.getMeta()).toEqual({
isTouched: true,
isBlurred: true,
isValidating: false,
isDirty: true,
isPristine: false,
Expand Down
7 changes: 7 additions & 0 deletions packages/form-core/tests/FormApi.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ describe('form api', () => {
errorMap: {},
isSubmitting: false,
isTouched: false,
isBlurred: false,
isPristine: true,
isDirty: false,
isValid: true,
Expand Down Expand Up @@ -55,6 +56,7 @@ describe('form api', () => {
isSubmitted: false,
isSubmitting: false,
isTouched: false,
isBlurred: false,
isPristine: true,
isDirty: false,
isValid: true,
Expand Down Expand Up @@ -89,6 +91,7 @@ describe('form api', () => {
isSubmitted: false,
isSubmitting: false,
isTouched: false,
isBlurred: false,
isPristine: true,
isDirty: false,
isValid: true,
Expand Down Expand Up @@ -134,6 +137,7 @@ describe('form api', () => {
isSubmitted: false,
isSubmitting: false,
isTouched: false,
isBlurred: false,
isPristine: true,
isDirty: false,
isValid: true,
Expand Down Expand Up @@ -178,6 +182,7 @@ describe('form api', () => {
isSubmitted: false,
isSubmitting: false,
isTouched: false,
isBlurred: false,
isPristine: true,
isDirty: false,
isValid: true,
Expand Down Expand Up @@ -226,6 +231,7 @@ describe('form api', () => {
name: {
isValidating: false,
isTouched: false,
isBlurred: false,
isDirty: false,
isPristine: true,
errors: [],
Expand All @@ -240,6 +246,7 @@ describe('form api', () => {
isSubmitted: false,
isSubmitting: false,
isTouched: false,
isBlurred: false,
isPristine: true,
isDirty: false,
isValid: true,
Expand Down