react-hook-form: V7 bug - nested field array has incorrect value appended and exception thrown on future append
Describe the bug This one might make your head spin a little. There are two issues here related to nested field arrays.
Let’s say we have a form values object like:
{
"first":[
{
"second":[
{
"third":[
{
"fourth":{
"objectKey":"someValue"
}
}
]
}
]
}
]
}
Then there will be some issues if we try to append the middle values of the field array.
- If we append a middle field array element (let’s say
second) to thefirstarray and we pass the final value (fourth) as an object, then it will be appended asundefinedrather than the object we specified.
{
"second":[
{
"third":[
{
"fourth":{
"objectKey":"someValue"
}
}
]
}
]
}
- If we try to append a middle element after we’ve appended a previous middle element, then the operation will throw an exception and crash our application. So for example we append the value above and then append.
{
"third":[
{
"fourth":{
"objectKey":"someValue"
}
}
]
}
to the previously appended element (second) this will throw an exception.
To Reproduce Steps to reproduce the behavior:
- Go to the code sandbox
- Immediately observe via the
watchoutput that the newly appended value has undefined as a final value rather than the object. Notice the default value passed touseFormdoes have the correct value - Click show elements
- Click the second add button that appears (add for the newly created field array element) and notice the exception that is thrown.
Codesandbox link (Required) https://codesandbox.io/s/react-hook-form-usefieldarray-template-forked-qc0ye?file=/src/index.js:1120-1181
I’m not sure if there is a limit to nesting, but if there is I would hope it could go more than 3-4 levels deep.
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 17 (17 by maintainers)
Commits related to this issue
- close #4337 support nested custom register for append, prepend and insert — committed to react-hook-form/react-hook-form by bluebill1049 3 years ago
- close #4337 support nested custom register for append, prepend and insert (#4338) * close #4337 support nested custom register for append, prepend and insert * optimize code * update unit tests... — committed to react-hook-form/react-hook-form by bluebill1049 3 years ago
- 7️⃣ V7 (#3741) * use useFormState with useController internally and new isValidating state(#3778) * use useFormState with useController internally * remove console.log * V7 Register (WIP) (#... — committed to react-hook-form/react-hook-form by bluebill1049 3 years ago
No rush just wondering. Thank you!
Sounds good. Appreciate all the help here.
Ok, thanks. Yes, this seems to be working correctly.