issue: Controller copies value before setting it to formState

[jukkahuuskonen]

Version Number

7.20.2 -> 7.x.x

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-with-ui-library-forked-jxltn2?file=/src/index.js

Steps to reproduce

1. Select Icecream type from end part of Select list
2. Reopen Select dropdown

Correct item is selected, but focused line is the first on list instead of the selected item and moving with arrows starts from item 0 instead of currently selected item.

Expected behaviour

When reopening the dropdown, correct line should be selected (as is) and focused (which isn't).

This works fine up to react hook form v.7.20.1 but in the v.7.20.2 it stops working.

It seems that in v.7.20.2 of react-hook-form, the library started to create a copy of Controller onChange-function input instead of setting the value it self into form values. This can be seen with the console.logs I placed in onChange-function where the selectOption can be found from options, but the console.log in useEffect can't find the form value iceCreamType from options

If you change to react-hook-form v.7.20.1 or earlier, then everything works fine.

I haven't tested this in Safari because I don't have access to Macs.

What browsers are you seeing the problem on?

Firefox, Chrome, Edge

Relevant log output

No response

Code of Conduct

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

[jukkahuuskonen]

Sorry guys, forgot the title on this issue due to being too tired (my dog is sick and I've been letting her out every 1-2 hours every nite for a few days). Is the missing title why this was moved to discussions, or do you just move issues to discussion here as a norm? Because atleast I think this is a problem.

There is a fix user can make. The value can be extracted in Controller render-prop and then manually searched from options and manually inserted to Select with value-prop. But figuring all that out was pretty painful and time consuming work. And considering that it was working fine with earlier versions, I think this is something that should be fixed.

[jukkahuuskonen]

Anything on this?

[leapful]

@jukkahuuskonen

This is not a bug according to the update on react-hook-form because handling form value should not depends on reference to avoid side-effect on get set value, that's why react-hook-form is trying to clone form values on change of the field.

If you want to achieve the same behavior with previous version, you need to provide the same reference data option to react-select.

Working demo: https://codesandbox.io/s/react-hook-form-with-ui-library-forked-dzvw6c?file=/src/index.js

[jukkahuuskonen]

That's what I actually did. Though, I would have defined this kind of change as a breaking change, since it does potentially break compatibility with other components. Especially ones that react-hook-form has a demo available.

Anyways, If this is not considered a bug, this can be closed.