Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Uncaught TypeError: fieldRef.focus is not a function error in React-hook-form setFocus with Reactstrap Input

I'm using react-hook-form to manage my form. I want my interface to scroll to the first error field on error submit but I'm getting this error every single time I use setFocus

This is my controller code

<Controller
    name="first_name"
    control={control}
    render={({ field: { ref, ...field } }) => (
      <Input
           {...field}
           innerRef={ref}
           type="text"
           id="first_name"
           className={classnames({
              'input-error': formState?.errors?.first_name?.message,
           autoComplete="nope"
and this is my setFocus code block
useEffect(() => {
    const firstError = (Object.keys(errors) as Array<keyof typeof errors>).reduce<keyof typeof errors | null>((field, a) => {
      const fieldKey = field as keyof typeof errors;
      return !!errors[fieldKey] ? fieldKey : a;
    }, null);
    console.log({ firstError });
    if (firstError) {
      setFocus(firstError);
  }, [errors]);
I somehow managed to create a sandbox for it but it doesn't show the same error. It errors on exact same code though.
https://codesandbox.io/s/gallant-voice-vqqi47?file=/src/App.js
                @KcH what code block do you have in your mind?  The setFocus comes from the useForm  hook from react-hook-form library
– JkAlombro
                Oct 3, 2022 at 6:55
                my bad so the trace in the err is from the lib itself ? may be a reproducible sample would be better for these kind :)
– KcH
                Oct 3, 2022 at 6:58
                @KcH yeah, seems like react-hook-form has this problem in other UI library as well like MUI. I've tried all suggested solutions so far like that innerRef in my code but nothing seems to work. Hold on i'll try to create a sandbox.
– JkAlombro
                Oct 3, 2022 at 7:02
                @KcH I edited the question and included a sandbox. Have a look. It doesn't produce the same error though. But it errors on same line
– JkAlombro
                Oct 3, 2022 at 7:23
If you ever encounter this error, this was caused by React's Strict Mode in dev environment. It means that this error wont occur on live environment. If you want to test your code without this error, just temporarily remove the strict mode.
Refer to this thread here
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.