Register vs Controller refs

[fpaczkov]

Hi!
It's my first post here. I encountered a problem while creating custom scrolling to errors:

Refs of the first (field created using register) and second (field created using controller) are different and I am not able to get scrollIntoView method from the second one.
Can someone explain why they are different? How can I get seconds element regular ref while using formState.errors?

react-hook-form version: 7.21.2

[Moshyfawn]

What's the behavior you're trying to achieve?
RHF takes care of focus and scroll of the input with an error.

Would you mind looking into this CSB and tweaking it to closer match your use-case?

[Moshyfawn]

Also, happy first post lol 🎂

[fpaczkov]

I am using standard inputs and custom fields (these I had problems with). I'll to adjust the CSB later.

[fpaczkov]

Well, I have found the cause of my problem why some fields are not focused by the default lib mechanism. I had to add tabIndex to root divs of my components. I think that it would be nice to mention about that in Controller not working with shouldFocusError? (V6) section of faqs.

Thanks for your time! 🙏

[Phe0]

Hello, I'm trying to achieve a behavior in which the page would scroll to the input without focusing it. The validation mode on my application is set to 'onBlur', so focusing it would make the errors vanish. Would there be any way to achieve this behavior?

[johnandresmedina]

Well, I have found the cause of my problem why some fields are not focused by the default lib mechanism. I had to add tabIndex to root divs of my components. I think that it would be nice to mention about that in Controller not working with shouldFocusError? (V6) section of faqs.

Thanks for your time! 🙏

I'm facing the exact same issue, wondering how did you solve it?
I'm using the latest version of the library: "react-hook-form": "7.62.0"