Focus loosing on Custom form input component

[KaushikSathvara]

Hello community!,

I've a use case where I have to build a custom component for form input, but when I try to submit the form and validation is failed somehow and then I try to input values in the fields then it looses the focus. But if I directly using the Input component then it works.

const schema = yup.object().shape({....})
.....
const { register, handleSubmit, reset, formState, control, watch } = useForm({mode:'onSubmit', resolver: yupResolver(schema)})
const MyInput = (props) => {
    return <Input {...props} />;
  };

return (
<form>
  <MyInput {...(register(name))} />
</form>
)


` ``

[Moshyfawn]

This part

const MyInput = (props) => {
  return <Input {...props} />
}

return (

looks like you're creating your MyInput component within the body of another component's function. This results in a different component ref being generated with each render by React, leading to inconsistent focus tracking. It's recommended to avoid defining components inside other components to mitigate such issues.

[KaushikSathvara]

I have the separate file for MyInput component, but the issue is still there.
I'm passing all the props to that file.

[Moshyfawn]

I have the separate file for MyInput component, but the issue is still there.
I'm passing all the props to that file.

I'll need a reproduction sandbox then as there isn't much to debug