Set focus on error in root of fieldArray

[terragady]

Hi,

when using a useFieldArray and we are getting error in root:
formState.errors.fields.root

how you can focus on some element, maybe a wrapper when the error occurs? Ref from root has only name in it and using it with setFocus does not do anything. Do you need a custom scroll to element? If I would do a custom one won't there be a race condition when error somewhere else occur? Then It will scroll to it as well through react-hook-form internal focus.

[Sophie1142]

+1

[davidr64]

I know this is an old thread but just in case others come across this. My solution:

export function FormErrorScrollTarget({
  children,
  name,
}: React.PropsWithChildren<{ name: string }>) {
  const {
    field: { ref: rhfRef },
  } = useController<FieldValues>({
    name,
  });

  const divRef = useRef<HTMLDivElement>(null);

  useImperativeHandle(rhfRef, () => {
    return {
      focus: () => {
        divRef?.current?.scrollIntoView?.({ behavior: "smooth" });
      },
    };
  });

  return <div ref={divRef}>{children}</div>;
}

You can give the same name to FormErrorScrollTarget as you give to useFieldArray and it will scroll to the div inside.