React Hook Form autofocus and error issue when used in HOC

[Aditya000786]

I have MUI TextField component(TextField2) inside of HOC, which is not getting auto-focused on form submission.
If i don't wrap it in HOC it works(TextField1).

I don't even get any errors on clicking of submit button for the first time.

Any idea what I'm doing wrong?

Stackblitz: https://stackblitz.com/edit/react-ts-1yn56f?file=App.tsx

TestHoc.tsx :

  function DP({ control }: any) {
    return (
      <div>
        <Controller
          render={(props1: any) => {
            let { field } = props1;
            let { ref, ...rest } = field;
            return <TextField label="TextField 2" {...rest} inputRef={ref} />;
          }}
          name="TextField2"
          defaultValue=""
          rules={{ required: true }}
          control={control}
        />
      </div>
    );
  }
  return DP;
}

App.tsx :

export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    control,
    formState: { errors },
  } = useForm();
  const onSubmit = (data: any) => console.log('data', data);
  const formRef: any = useRef(null);
  const TextField2Comp = withTestHoc();
  const submitForm = () => {
    formRef.current.dispatchEvent(
      new Event('submit', { cancelable: true, bubbles: true })
    );
    console.log('errors', errors);
  };

  return (
    <div>
      <form ref={formRef} onSubmit={handleSubmit(onSubmit)}>
        <Controller
          render={(props1: any) => {
            let { field } = props1;
            let { ref: ref1, ...rest } = field;
            return <TextField label="TextField 1" {...rest} inputRef={ref1} />;
          }}
          name="TextField1"
          defaultValue=""
          rules={{ required: true }}
          control={control}
        />

        <TextField2Comp control={control} />
      </form>
      <Button onClick={submitForm}>Submit</Button>
    </div>
  );
}

[Moshyfawn]

Haven't looked at your code closely yet, but from what I see, the way you're using HOC is bad, meaning you re-init your component inside HOC every render, hence RHF looses the input's ref, hence you don't get the focus on your input.

You should avoid initing your components / HOCs inside the func component's body during the render phase. It's not specific to how RHF works, but the general React behavior

[Aditya000786]

Hey @Moshyfawn thanks a lot for the reply
and have changed the hoc location to outside of function body as below:
https://stackblitz.com/edit/react-ts-u6tlkf?file=App.tsx

const TextField2Comp = withTestHoc();
export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    control,
    formState: { errors },
  } = useForm();
  const onSubmit = (data: any) => console.log('data', data);
  const formRef: any = useRef(null);
  const [render, setRender] = useState(0);
  const submitForm = () => {
    formRef.current.dispatchEvent(
      new Event('submit', { cancelable: true, bubbles: true })
    );
    console.log('errors', errors);
  };

  return (
    <div>
      <form ref={formRef} onSubmit={handleSubmit(onSubmit)}>
        <Controller
          render={(props1: any) => {
            let { field } = props1;
            let { ref: ref1, ...rest } = field;
            return <TextField label="TextField 1" {...rest} inputRef={ref1} />;
          }}
          name="TextField1"
          defaultValue=""
          rules={{ required: true }}
          control={control}
        />

        <TextField2Comp control={control} />
      </form>
      <Button onClick={submitForm}>Submit</Button>
    </div>
  );
}

And now the focus is working, but now seeing 2 different issues:

1. As shown in the ss you can see that on the first click I'm not getting correct errors object in console.
2. It takes around 1500 ms after which focus is shifted to 2nd text field
   Steps to reproduce:
   a)After 1st render leave both the fields empty.
   b)Click on submit btn (textField1 will be autofocussed)
   c)Type something and then click the submit bttn again in <1500ms.
   d)It wont focus your 2nd textfield. After that if u click the submit btn it will be focused and works correctly.

[Moshyfawn]

Can you, please, elaborate on what your HOC is trying to achieve? Having a hard time debugging the issue not understanding the logic behind it

[Aditya000786]

So the hoc which I have used here is just a sample, so I can easily share the issue.
In reality, I'm trying to generate the components dynamically using the JSON which will be received by a template component.

Sample json:
const templateJson = {"elements":[{"key":"MainTitle","component":"mui-Typography","props":{"children":"Enter your first name"}},{"key":"NameInput","component":"mui-TextField","props":{"label":"First Name"},"validations":["required"]}]}

Now this will be passed by a hoc which will decide which component to render, what props to be passed.. etc.

[Aditya000786]

I think I got it.
In the code after dispatching the form submit event, I'm directly logging the errors. (But at the point of time formstate is not updated yet).
So in that case I can just subscribe to formState using useEffect hook and get the errors.

[Aditya000786]

@Moshyfawn the second issue is not due to hoc or anything, it can be seen even in the basic form.
I don't think its a very big deal, but noticed it will using the form so sharing it here.

https://codesandbox.io/s/react-hook-form-basic-forked-guxjky?file=/src/index.js