question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`append` function of `useFieldArray` and `isDirty` on form state does not work as expected when nesting forms

See original GitHub issue

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)

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:18 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
delijahcommented, Nov 24, 2020

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?

1reaction
delijahcommented, Nov 23, 2020

Ok, i’ll try so 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

Validate a nested component in a fieldArray using react-hook ...
I was thinking that perhaps I need to have another useForm in the MaterialBar , but how do I pass the state to...
Read more >
Migrate From V6 to V7 - Simple React forms validation
Hi there,. React Hook Form focus on the following aspect on Version 7: (DX) Strict typed form. Reduce package size. Performance enhancements.
Read more >
Nesting Reactive Forms in Angular tutorial - YouTube
In this video we build a simple contacts list that allows the user to add up to 3 contact items, each containing a...
Read more >
API Documentation - Simple React forms validation
This callback function allows you to run through any schema or custom validation. The function has the entire form values as argument, and...
Read more >
Using React Hook Form in component tests | by Adam J. Arling
React Hook Form is an incredibly useful package for building out simple to complex web forms. This article illustrates our team's approach to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found