issue: Controller receiving outdated state

[noahw3]

Version Number

7.50.1

Codesandbox/Expo snack

https://codesandbox.io/p/devbox/sldq7t

Steps to reproduce

Originally created as a discussion a few weeks ago, there's more context in that question.

In the codesandbox demo, whenever the first select value is changed, the second select should reset its value. This works when you've selected the same type of element. However once you've chosen a value in the second select and then re-select a different type in the first one, the controller's state is out of sync with the overall form state. This can be observed by the state no longer getting reset, and I've added some console logs to demonstrate this.

Expected behaviour

When you go from multiSelect -> YesNoRadio (or vice versa) the second input resets its value.

What browsers are you seeing the problem on?

Chrome

Relevant log output

Selecting 1 -> yes -> 5 -> no -> 2

index.js:8 values in child {operator: undefined}
index.js:8 value in controller undefined
index.js:8 values in child {operator: undefined}
index.js:8 value in controller undefined
index.js:8 value in controller any
index.js:8 values in child {operator: 'any'}
index.js:8 value in controller any
index.js:8 values in child {operator: 'any'}
index.js:8 value in controller any
index.js:8 values in child {operator: undefined}
index.js:8 value in controller undefined
index.js:8 value in controller none
index.js:8 values in child {operator: 'none'}
index.js:8 value in controller none
index.js:8 values in child {operator: 'none'}
index.js:8 value in controller none
index.js:8 values in child {operator: undefined}
index.js:8 value in controller none

Code of Conduct

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

[bluebill1049]

please share steps and reduce the amount unrelated code

[noahw3]

I attempted to clean it up and remove as much unnecessary code as possible: https://codesandbox.io/p/devbox/gallant-kalam-forked-qftyck

The basic way that it works is that there are two types of items that can be initially selected from. There is then a second field which is what the form state is used to track. Depending on the type of item that was initially selected, there are two different types of component that are conditionally rendered in order to set the form state appropriately. These components use form context and wrap their uncontrolled inputs in Controller.

Whenever the first item is changed, the form state is supposed to reset. This works correctly when the switching between items of the same type. However, when switching between items of different types and the switching which component gets rendered, the form state gets correctly reset, but the Controller state does not get reset.

Steps to see behavior:

1. Select 1
2. Select a
3. Select 5 [Notice that the second field is correctly cleared]
4. Select b
5. Select 2 [Notice that the second field incorrectly maintains state]

[noahw3]

This came up again today and I dug back into it. Turns out that underlying issue was using undefined in the defaultValues. Changing this to null resolved the strange behavior. Interesting that it'd manifest this way (I know that it's documented to not use undefined for defaultValues, but I hadn't run into any issues with it elsewhere).