react-hook-form icon indicating copy to clipboard operation
react-hook-form copied to clipboard

issue: `useFieldArrays` conflicting with controlled inputs

Open clarityflowers opened this issue 6 months ago • 1 comments

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 uuid and otherValue are present on the new item, name is not, even though it was included in the append call.

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

clarityflowers avatar Aug 06 '25 23:08 clarityflowers

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 Controller could infer default values from append(), e.g.:
append({ name: "default name" })
  • It feels a bit unintuitive that Controller can’t infer defaults from append(). Is this intentional?
  • Currently, defaultValue must be provided explicitly.
  • If intentional, the docs could highlight this nuance.
  • Otherwise, allowing append values to be used as defaults could reduce confusion for developers.

Oussema39 avatar Aug 17 '25 17:08 Oussema39