Ability to scroll to the input with error

See original GitHub issue

It would be nice to have some scrollToError method which would scroll to the highest input found which name matches one of the errors keys.

Currently, there is a similar behavior that happens after the form validation but there are cases when errors are set manually for some fields using setError API, for example, after server’s error response.

I believe I could implement such functionality outside RHF but I’d have to store input refs and names separately for this and it just feels like it would be much better if it was implemented in RHF.

Or perhaps, alternatively, if I could access all input refs mapped to fields names from RHF it would make it simpler to implement such scrolling functionality manually.

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:48 (23 by maintainers)

Top GitHub Comments

9reactions

rkokcommented, Aug 29, 2021

Here’s one that scrolls to the top-most input:

const elements = Object.keys(errors).map(name => document.getElementsByName(name)[0]).filter(el => !!el);
elements.sort((a, b) => b.scrollHeight - a.scrollHeight);
elements[0]?.scrollIntoView({behavior: 'smooth', block: 'center'});

3reactions

eberens-nydigcommented, Jun 28, 2021

One thing I have noticed is errors are not in order they are registered but alphabetical. So the first ref that you scroll to may not be the top-most. I’m not sure how one would go about doing that.

function useScrollToError(errors) {
  useEffect(() => {
    for(const error of Object.values(errors)) {
      if(error?.ref) {
        error.ref.scrollIntoView({ behavior: 'smooth' })
        break
      }
    }
  }, [errors])
}