Fix <ArrayInput>
should keep error state on children after unmount
#9677
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We have a rather large form, in which we for optimization reasons unmount parts of the form when not visible. This doesn't work to well with
<ArrayInput />
however, which clears all state (errors, touched, etc.) when it is unmounted, which both means that the general valid/invalid state of the form is no longer correct.To reproduce:
<ArrayInput />
that can be unmounted and some field that can have errors as child<ArrayInput />
Here is a reproducible example: https://stackblitz.com/edit/github-ntzyud-hb8uu4?file=src%2Fposts%2FPostEdit.tsx (note that tabbed forms have a similar issue, however that can more easily be worked around in user-space code)
This fix uses the
react-hook-form
options to keep the state of the<ArrayInput />
when it is unmounted.I'm not 100% sure if this might break BC (I think it would be possible to build a form that depends on the current behavior, but I don't think it would make much sense to do so), if that is the case let me now and I'll retarget this PR to the
next
branch.