Focusing with smooth scrolling

[davidalvarezr]

I'm using the Controller component and pass the ref to my custom component, which allows react-hook-form to focus (and scroll to) the first component having an error. However, I don't see a param to fill to have the "smooth scroll" behavior.

Is there a way to achieve it ?

Thanks

[leapful]

@davidalvarezr

You can override focus() method of the DOM element when passing it via "ref" of "register" and perform any custom behaviour for focusing, something like scrollIntoView with smooth option then trigger focus() of the element.

Example of overriding focus() method: https://codesandbox.io/s/setfocus-forked-qqr3zr?file=/src/App.tsx

[bluebill1049]

thanks @leapful also with the error state containing the actual input ref, you can leverage that as well.

useEffect(() => {
  if (formState.errors.test) {
    formState.errors.test.ref // the actual input reference
  }  
}, [formState])

[davidalvarezr]

Thanks. It was exactly what I was looking for !

[denchen]

After trying both of the above code snippets, I realized in my form, I could easily just set the CSS scroll-behavior to smooth on the main form div, and focus() will smooth-scroll to the input's location.

[nonwiz]

const { formState: { errors } } = useForm();

const element = errors["input_name"].ref;
element?.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});

[vigneshwaran-ravi]

It would be nice, if i am able to pass scrollbehaviour parameter to setFocus.

[penderuk]

@davidalvarezr I was also looking for the answer and after reading through this issue thread, I created the following component. By integrating it with react-hook-form, it effectively handles both server and client validation errors. However, when dealing with custom "fields" like radio button groups, where multiple inputs share the same name, react-hook-form might not determine the correct ref and formState.errors[field] would contain the name property only instead of holding the ref. In such cases, I simply provide a ref callback to one of the radio inputs and trigger scrolling when an error occurs.

import { useEffect } from 'react';
import { useFormContext, FieldError } from 'react-hook-form';

export const ScrollToFieldError = () => {
  const {
    formState: { errors, isSubmitting },
  } = useFormContext();

  useEffect(() => {
    const error = Object.values(errors)[0] as FieldError;

    if (!(error?.ref instanceof HTMLElement) || isSubmitting) return;

    // To achieve the desired smooth scrolling behavior,
    // make sure to configure the useForm with shouldFocusError set to false.
    error.ref.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    });
    error.ref.focus({ preventScroll: true });
  }, [errors, isSubmitting]);

  return null;
};

// ------------------------

<FormProvider {...}>
  <ScrollToFieldError />
  <form {...}>{...}</form>
</FormProvider>