React-select & creatable select with reatc-hook-form 关注验证错误

Question

I am using create select components inside a react-hook-form. I have tried the react-select and creatable-react-select both and the behaviour I experience in context of this issue is the same.

Using latest react-hook-form (7.6.1), I can't set the field to be focussed when there's an error bound to the field. CODE SANDBOX EXAMPLE FOR THIS

When I use an older version of react-hook-form, I can get this behaviour to work as expected. CODE SANDBOX EXAMPLE FOR THIS

As i want this behaviour to work in the latest react-hook-form, any suggestions on what is the problem in the first example?

Answer 1

using controller for react-select component but did not use prop "field" from "render" method of Controller, therefore, the ref element is not set in order to help react-hook-form to set focus.

Working sample: code sandbox