react-hook-form: `append` function of `useFieldArray` and `isDirty` on form state does not work as expected when nesting forms
Describe the bug
When having nested forms, it looks like the context of the append function of useFieldArray gets messed up. Therefore isDirty on the form state stays false after appending a field to the field array, even though dirtyFields have been populated (Example 1).
If i wait for the nested form to get removed from the dom, the append function works as expected again (Example 2).
To Reproduce Steps to reproduce the behavior:
For Example 1:
- Type any string into the text field in the modal on the bottom right
- Press ‘Submit’ in the modal on the bottom right
- Now you see in the dumped form state, that
isDirtyis still false, but there aredirtyFields
Codesandbox link (Required) Example 1 (bug): https://codesandbox.io/s/react-hook-form-useform-template-forked-4lnku?file=/src/index.js Example 2 (workaround): https://codesandbox.io/s/react-hook-form-useform-template-forked-pyuy6?file=/src/index.js
Expected behavior
appendshould work correctly, even in nested formsisDirtymust be true, when there are dirty fields / when a field has been added to a field array
Desktop (please complete the following information):
- OS: macOS Mojave Version 10.14.6 (18G5033)
- Browser: Google Chrome Version 87.0.4280.67 (Official Build) (x86_64)
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 18 (10 by maintainers)
Commits related to this issue
- fix #3508 state update with watch — committed to react-hook-form/react-hook-form by bluebill1049 4 years ago
works with version
6.11.6-beta.1👍 and it works also in our stack withbeta.1. thanks a lot for your quick help!still the question why you’ve removed the
resetis bugging me @bluebill1049 . is this not needed anymore?Ok, i’ll try so 👍