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:

  1. Type any string into the text field in the modal on the bottom right
  2. Press ‘Submit’ in the modal on the bottom right
  3. Now you see in the dumped form state, that isDirty is still false, but there are dirtyFields

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

  1. append should work correctly, even in nested forms
  2. isDirty must 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

Most upvoted comments

https://codesandbox.io/s/react-hook-form-useform-template-forked-km3r6?file=/src/index.js

works with version 6.11.6-beta.1 👍 and it works also in our stack with beta.1. thanks a lot for your quick help!

still the question why you’ve removed the reset is bugging me @bluebill1049 . is this not needed anymore?

Ok, i’ll try so 👍