setFocus with Control and useController?

[shoxter]

First off, I want to say I LOVE the setFocus functionality. I just saw that was released and immediately upgraded to the latest version of the package.

With that being said, the first use case in which I attempted to use it, it didn't work and I'm guessing it's due to my lack of understanding of how specifically it works.

I have a FormAutocomplete component that requires the usage of useController inside of it to register it with the parent component's form. This hasn't posed an issue thus far, but it doesn't seem to work with the setFocus API.

In my mind, it works something like this:

1. useForm exports the control
2. I use useController with the passed in control to create the necessary information to pass to the FormAutocomplete so it can be registered with the form.
3. I call the setFocus method on this autocomplete and nothing happens.

The rest of the form's functionality seems to work okay, so I'm guessing it has something to do with the setFocus API and/or my understanding of it.

Can someone provide clarity as to where my thinking/usage is incorrect?

Thanks in advance for your time!

[BassWow]

I have created a similar Autocomplete component and had similar issues with v7 so this ended up working for onFocusErrors.

Most import part for me was this:

ref={(el) => el && ref({ ...el, focus: () => { el.focus(); }, }) }

[kalczur]

To use setFocus with useController, simply use ref from useController
Example: https://codesandbox.io/p/sandbox/react-hook-form-setfocus-with-usecontroller-vllzr2