-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
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
Reset submission error when the field is changed #5962
Conversation
06f039b
to
f812776
Compare
@@ -41,7 +41,7 @@ describe('FormWithRedirect', () => { | |||
|
|||
expect(renderProp.mock.calls[1][0].pristine).toEqual(true); | |||
expect(getByDisplayValue('Foo')).not.toBeNull(); | |||
expect(renderProp).toHaveBeenCalledTimes(2); | |||
expect(renderProp).toHaveBeenCalledTimes(3); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Using useFormState
triggers a rerender.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's a problem... This feature impacts the performance of all forms to allow a feature that isn't so common...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Encouraging!
@@ -51,7 +53,10 @@ const FormWithRedirect: FC<FormWithRedirectProps> = ({ | |||
initialValues, | |||
initialValuesEqual, | |||
keepDirtyOnReinitialize = true, | |||
mutators = arrayMutators as any, // FIXME see https://github.com/final-form/react-final-form/issues/704 and https://github.com/microsoft/TypeScript/issues/35771 | |||
mutators = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd create a defaultMutators
outside of the component, to avoid that the mutators
value change at each render
*/ | ||
const useResetSubmitErrors = () => { | ||
const { mutators } = useForm(); | ||
const { values } = useFormState({ subscription: { values: true } }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I find it weird that you need to call useFormState
twice, especially since you've already called useForm
. Maybe that's why you had to update the FormWithRedirect
unit test.
I assume you could do the same with form.subscribe()
, without even calling useFormState
once.
Could you try that and see if it removes the extra render?
@@ -41,7 +41,7 @@ describe('FormWithRedirect', () => { | |||
|
|||
expect(renderProp.mock.calls[1][0].pristine).toEqual(true); | |||
expect(getByDisplayValue('Foo')).not.toBeNull(); | |||
expect(renderProp).toHaveBeenCalledTimes(2); | |||
expect(renderProp).toHaveBeenCalledTimes(3); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's a problem... This feature impacts the performance of all forms to allow a feature that isn't so common...
@fzaninotto is it better now? |
sorry to jump in the discussion, but i wanted to show my appreciation to your work @alanpoulain |
0416ce3
to
56e6733
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very nice! Thanks!
I am getting an error message after upgrading to a version with this change.
I am using mutators in FormWithRedirect to implement some data manipulation logic, and the form doesn't work anymore. Should I open a bug or there is a solution? |
If you added custom mutators, make sure you include the one we need as well. We should document that though. Besides please don't comment on PR like that, open issues instead |
We need array mutators and https://github.com/ignatevdev/final-form-submit-errors which has been introduced in this very PR |
Fixes #5938.
Use https://github.com/ignatevdev/final-form-submit-errors to reset the submission error when the field is changed.
I'm not using the
SubmitErrorsSpy
component but a new hook instead to make it work in theFormWithRedirect
component.I've also opened a PR in https://github.com/ignatevdev/final-form-submit-errors to add the hook there: ignatevdev/final-form-submit-errors#6.