issue: Input field value is not re-rendered in controlled nested array when another array element is selected

[schiller-manuel]

Version Number

7.50.1

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/react-hook-form-conditional-forked-j3m6n9?file=%2Fsrc%2Findex.js

Steps to reproduce

1. Go to example on codesandbox
2. Switch from 0 to 1 in select
3. See that field values are not updated

see screen recording

bug.mp4

Expected behaviour

When the selectedIndex is changed from 0 to 1, name changes from test.0.values.${valueIndex} to test.1.values.${valueIndex}. I would thus expect that the rendered input values change from ["aaa", "bbb", "ccc"] to ["xxx", "yyy", "zzz"].

A workaround is to use the name as key, then the correct values are rendered:

<li key={`test.${selectedIndex}.values.${valueIndex}`}>

workaround.mp4

What browsers are you seeing the problem on?

Firefox, Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

could you update your CSB? it's missing.

[schiller-manuel]

sorry it was still in drafts, now it should be accessible

[bluebill1049]

the update would need to be a valid path for that registered controller input. test.${selectedIndex}.values.${valueIndex}, it doesn't work at your current implementation.

[schiller-manuel]

sorry I don't understand that. how would a valid path look like if mine is invalid?

[bluebill1049]

This is the input name which you have registered test.${selectedIndex}.values.${valueIndex}

and this is your setValue onChange={(e) => setValue("selectedIndex", e.target.value)}, setValue will need the specific controller name/path

[schiller-manuel]

selectedIndex is a field in the form state, next to test.

[bluebill1049]

selectedIndex is a field in the form state, next to test.

yes, but it doesn't work like that. controller is not a state management input (for that entire object), it's just a input which store value for that particular path which you have giving by name/path.

you can't do this basically

name="test.test.test.test.test.test"
- setValue('test', { test: {test: {test: ''}}})
+ setValue('test.test.test.test.test.test', 'data')

[schiller-manuel]

I found the problem.

useController uses useWatch which does not react to name property change.
See:

• Support for dynamic name parameter in useWatch  #9507
• useWatch to react to name property change #9732
• issue: useWatch doesn't react to name property change #9727

I enhanced the example to also show the output from useWatch and how it does not get updated: codesandbox