issue: setValue does not update value inside Controller render

[raulalonso-aircury]

Version Number

7.43.9

Codesandbox/Expo snack

https://codesandbox.io/s/setvalue-controller-render-value-jsls4w

Steps to reproduce

1. Go to the code sandbox added.
2. Click on 'Select a name' and choose one.
3. Click on 'Click here to select a date' and choose one.
4. Scroll down to console.
5. See that the value was updated but visually it still has the old value in the react datepicker.

Expected behaviour

Hello, I don't know if it's a bug or if I am forgetting something sorry.

I have two controlled components, a react-datepicker and a react-select. When I update the react-datepicker I want to set the value of the react-select to null and therefore I use an onChangeCallback to set it to null using setValue.

The value is updated to null but visually I still see the old value in the react-select, it's like the value inside the Controller render is not being updated using setValue.

What browsers are you seeing the problem on?

Chrome

Relevant log output

The console log output is:

{test: Array(1)}
test: Array(1)
0: Object
id: null
name: null
dateBecameSomething: Mon Apr 10 2023 00:00:00 GMT+0200 (Central European Summer Time)

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

[leapful]

@raulalonso-aircury

The registered field name should be same between the one from Controller and setValue. You are using different name test.${index}.name and test[${index}].name.

Working demo: https://codesandbox.io/s/setvalue-controller-render-value-forked-143l49?file=/src/App.js

[raulalonso-aircury]

Thank you! I was struggling and I knew it was something small I was mistaken, thank you very much and I'm sorry, I'm just getting to know this wonderful library.

[kemaltf]

thanks mate, i also was struggling for 2 weeks just for this, and realized the mistake is only small mistaken😢

[Fi1osof]

Probably need to invoke update event on each nested fields.
Example:
If i just set value on parent field

        formMethods.setValue(`triggerCreateRequest.trigger.specs.${index}`, {
          trigger_subject: "1",
          generic_trigger_spec_type,
          generic_trigger_spec_value: {
            resourcetype: "TriggerUrlsSpec",
            urls: [],
          },
        })

My nested Controller with name triggerCreateRequest.trigger.specs.${index}.trigger_subject does not updated immediately.

form.getValues() have actual value, but Controller does not.

I have set value twice.

        formMethods.setValue(`triggerCreateRequest.trigger.specs.${index}`, {
          trigger_subject: "1",
          generic_trigger_spec_type,
          generic_trigger_spec_value: {
            resourcetype: "TriggerUrlsSpec",
            urls: [],
          },
        })
        formMethods.setValue(
          `triggerCreateRequest.trigger.specs.${index}.trigger_subject`,
          "11"
        )