Integration with custom fields, wrong focus

[pedrojioc]

Hello i come from twitter.

Here is a reproducible sample of the form:
Link to Sandbox

After troubleshooting with the RadioButton custom component. I ran into a new problem; I have registered all the required fields, the RadioButtons at the beginning are one of these required fields.

If a user tries to submit the form without selecting either of the two options, the focus is set on one of the text fields and not on the RadioButtons. The same happens with the react-select fields, react-hook-form ignores them and does not focus on them

[bluebill1049]

The following CSB was partially brought over from your CSB without all the other side dependencies.

• React-select focus works
• Radio button focus works

https://codesandbox.io/s/exciting-bas-zq6bk?file=/src/App.js

There are couple of issues with your usage, I would recommend you refer more to the doc.

Here are some of my recommendations:

1. if you want to build a controlled component, use useController (eg RadioButton has value props, so I assume u want to build a controlled component)
   https://react-hook-form.com/api/usecontroller

2. you don't really need to use useState, rather you can correctly register all your input and use watch or useWatch API.
   https://react-hook-form.com/api/useform/watch

[pedrojioc]

I appreciate your help. It has put me on the right track when it comes to controlled inputs and the use of "watch".
You are correct in saying that what I want is controlled input, and I tried but got errors and ended up using "register", although now I will use watch to do this.
But I still have problems with the focus on the errors.
In two specific cases.

1. In RadioButtons when they are loaded dynamically.

!!institutions && institutions.map((institution, index) => (

              <RadioButton
                key={`institution-${institution.id}`}
                name="institution"
                id={`institution-${institution.id}`}
                value={institution.id}
                isChecked={parseInt(watchInstitution) === institution.id}
                label={institution.name}
                {...register('institution', { required: index === institutions.length - 1 })}
              />
            ))

2. In the Select when there are inputs below it. (I have forked your codesandbox to demonstrate this)
   Link to Codesandbox

Thanks for your reply, it is very helpful