react-hook-form: Nested useFieldArray - nested children do not show default values after appended in parent

Describe the bug Form data structure in this Codesandbox:

test[] – name – nested[] ----name

When using useFieldArray in a nested way, newly appended 1st level data (in this case is “test”) does not have default value for its child array “nested” even called append like below. append({ name: "append", nested: [{ name: "append nested by parent" }] })

To Reproduce Steps to reproduce the behavior:

Go to below sandbox link
Click on ‘Append’
See newly appended one without a default children in “nested” 😭

Codesandbox link https://codesandbox.io/s/react-hook-form-usefieldarray-n0xph?fontsize=14&hidenavigation=1&theme=dark

Expected behavior Expected to see newly appended one with default value in “nested” like the 1st one by defaultValues in useForm.

Desktop (please complete the following information):

OS: MacOS
Browser Chrome
Version 80.0.3987.87 (Official Build) (64-bit)

Additional context I guess it should be expected behaviour for nested useFieldArray? Hope I didnt misuse useFieldArray as i cannot found any example demonstrating nested usage. Or is there any workaround for case like this?

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 26 (13 by maintainers)

Most upvoted comments

Done https://github.com/react-hook-form/react-hook-form/issues/994 👍

jd-erreape on Feb 8, 2020

Ey sorry, it would be the same one posted by @wayne-unolab

https://codesandbox.io/s/react-hook-form-usefieldarray-n0xph?fontsize=14&hidenavigation=1&theme=dark

jd-erreape on Feb 8, 2020

I think there’s still some issue with the useFieldArray that I’m experimenting myself but can be reproduced on the sandbox provided by @wayne-unolab.

Describe the bug

It seems like, after moving entries from the parent record, if immediately after you submit the form, the data provided to the submit callback is incomplete for the entries that have been moved (they do not contain info about the nested entities).

To Reproduce

Create three nested entities, like

append 1 - nested 1
append 2 - nested 2
append 3 - nested 3

Press move button: append 2 - nested 2 and append 3 - nested 3 will change their positions
Click on submit

The output in the console will be:

0: {name: "append 1", nested: Array(1)}
1: {name: "append 3"}
2: {name: "append 2"}

Expected behavior

The output in the console should be:

0: {name: "append 1", nested: Array(1)}
1: {name: "append 3", nested: Array(1)}
2: {name: "append 2", nested: Array(1)}

Thanks for all the hardwork! Really enjoying this library 😃

jd-erreape on Feb 8, 2020