issue: `useFieldArrays` conflicting with controlled inputs
Version Number
7.58.1
Codesandbox/Expo snack
https://codesandbox.io/p/sandbox/recursing-shannon-l75z4g?file=%2Fsrc%2FApp.tsx%3A11%2C1
Steps to reproduce
- Go to the codesandbox link.
- Click "Add item"
- Observe that while
uuidandotherValueare present on the new item,nameis not, even though it was included in theappendcall.
Expected behaviour
All values provided to append are present on the newly-added item.
What browsers are you seeing the problem on?
Firefox
Relevant log output
Code of Conduct
- [x] I agree to follow this project's Code of Conduct
Hi @clarityflowers I was able to reproduce this issue in the sandbox. When clicking “Add item”, the appended object includes uuid and otherValue, but the name property is missing, even though it’s passed to append().
It seems that Controller does not automatically use appended values as initial state. Without explicitly setting defaultValue, the field renders as undefined, so the name field is effectively dropped from the form state.
Workaround / Fix
Set defaultValue={item.name} in the Controller:
{fields.map((item, i) => (
<Controller
key={item.uuid}
name={`values.items.${i}.name`}
control={control}
defaultValue={item.name} // ✅ fix
render={({ field }) => <input {...field} />}
/>
))}
This preserves and displays the name property correctly.
Notes / Questions
- It feels more intuitive if
Controllercould infer default values fromappend(), e.g.:
append({ name: "default name" })
- It feels a bit unintuitive that Controller can’t infer defaults from append(). Is this intentional?
- Currently,
defaultValuemust be provided explicitly. - If intentional, the docs could highlight this nuance.
- Otherwise, allowing
appendvalues to be used as defaults could reduce confusion for developers.