Describe the bug
I have a nested array form, and some components need to be hidden when show
flag is false.
The form will remove component when show is false, and mount component when flag is true.
It is perfect at the first level field array. However, in nested-field-array, we lose the default values after we re mount it.
I am not sure it is a bug or I misunderstood the correct way.
Please help me!
To Reproduce
Steps to reproduce the behavior:
- Go to code sandbox link
- Click “show” checkbox in first level
- See our nested array components.
- Click test1’s “show” checkbox.
- See test1’s children(nested field array)
- Click test1’s “show” checkbox.
- Hidden test1’s children(nested field array)
- Click test1’s “show” checkbox.
- LOL… We can not see the test1’s children(nested field array)
Codesandbox link (Required)
Include a codesandbox will help us to investigate the issue quicker.
https://codesandbox.io/s/react-hook-form-nestedarray-empty-issue-fpolt?file=/src/Item.js
Expected behavior
- Go to code sandbox link
- Click “show” checkbox in first level
- See our nested array components.
- Click test1’s “show” checkbox.
- See test1’s children(nested field array)
- Click test1’s “show” checkbox.
- Hidden test1’s children(nested field array)
- Click test1’s “show” checkbox.
- See the test1’s children(nested field array)
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: macOS Big Sur 11.0.1
- Browser: Safari 14.0.1
- React Hook Form Version: 16.15.4
Additional context
I am not sure it is a bug or I misunderstood the correct way.
IMO, I should get defaultValue when mount a fieldArray component. And it works on the version 6.14.2
https://codesandbox.io/s/react-hook-form-nestedarray-empty-issue16142-wrznk?file=/src/Item.js
for v6, you can set config
shouldUnregister: false
. this will be the default behavior in v7.watch is always at root, useWatch at component level.