Version Number
7.80
Codesandbox/Expo snack
https://codesandbox.io/p/devbox/rhf-subscribe-reset-forked-t9996x
Steps to reproduce
- Click "submit" -
undefined is printed.
- Refresh. Now, click "clear errors". This clears the errors from
firstName (but does not actually write to the form). Then, click "submit". Now, firstName is logged. The clearErrors call populated the internal name value, even though it neither the clearErrors or submitting the form actually edits a form value.
Expected behaviour
No form values were edited. Even after calling clearErrors, the name value should still be undefined.
See the similar issue #13569, which was fixed in #13569.
|
updateFormState(formStateData); |
|
const { name, ...formState } = formStateData; |
|
const keys = Object.keys(formState); |
This code updates the full form state, which is problematic because fields like name and type are tied to a single change event. They're not actually part of the persisted form state.
FormState is defined here and it does not include fields like name, type, and values. Nonetheless, they are being merged into it which causes issues with name later being stale.
|
export type FormState<TFieldValues extends FieldValues> = { |
|
isDirty: boolean; |
|
isLoading: boolean; |
|
isSubmitted: boolean; |
|
isSubmitSuccessful: boolean; |
|
isSubmitting: boolean; |
|
isValidating: boolean; |
|
isValid: boolean; |
|
disabled: boolean; |
|
submitCount: number; |
|
defaultValues?: undefined | Readonly<DeepPartial<TFieldValues>>; |
|
dirtyFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>; |
|
touchedFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>; |
|
validatingFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>; |
|
errors: FieldErrors<TFieldValues>; |
|
isReady: boolean; |
|
}; |
What browsers are you seeing the problem on?
Chrome
Relevant log output
Code of Conduct
Version Number
7.80
Codesandbox/Expo snack
https://codesandbox.io/p/devbox/rhf-subscribe-reset-forked-t9996x
Steps to reproduce
undefinedis printed.firstName(but does not actually write to the form). Then, click "submit". Now,firstNameis logged. TheclearErrorscall populated the internalnamevalue, even though it neither theclearErrorsor submitting the form actually edits a form value.Expected behaviour
No form values were edited. Even after calling
clearErrors, thenamevalue should still beundefined.See the similar issue #13569, which was fixed in #13569.
react-hook-form/src/logic/shouldRenderFormState.ts
Lines 18 to 20 in 6112441
This code updates the full form state, which is problematic because fields like
nameandtypeare tied to a single change event. They're not actually part of the persisted form state.FormStateis defined here and it does not include fields likename,type, andvalues. Nonetheless, they are being merged into it which causes issues withnamelater being stale.react-hook-form/src/types/form.ts
Lines 159 to 175 in 6112441
What browsers are you seeing the problem on?
Chrome
Relevant log output
Code of Conduct