[HELP] Input DomRef Register Property 'current' is missing

[phaitonican]

Hello, I am using React Bulma Components and React Form Hooks packages. At the input:

type FormValues = {
    email: string;
    password: string
}
const {
    register, 
    handleSubmit, 
    formState: 
    { 
        errors, 
        isSubmitSuccessful, 
        isSubmitting 
    } 
} = useForm<FormValues>();

#return

<Form.Input
    name="email"
    domRef={register({required: true})}
    type="email"
    placeholder="e.g. bobsmith@gmail.com"
    required
/>

Gives me this error:

Property 'current' is missing in type 'UseFormRegisterReturn' but required in type 'RefObject<"input">'.

Its inside a functional component. I think I am doing something completely wrong and misunderstanding something,

I found same issue here but I couldn't understand how to fix this.

I tried this fix: #343 (comments)

But then I get this error because I use functional component?

328 at react-hook-form

Thanks a lot.

[phaitonican]

right now I use manually <input {register("email")} className="input" /> it does the job but its not the right way...

[couds]

Hi @phaitonican I was thinking about this issue. and what I can up was with this:

Create a Wrapper that transform the ref prop to the domRef this library use. I will probably add this wrapper on the next version, but meanwhile you can use it like this

// Outside your component
const withRef = (Component) => {
  return React.forwardRef((props, ref) => {
    return <Component {...props} domRef={ref} />;
  });
};

const InputWithRef = withRef(Form.Input);

// inside the component use it like this

const MyComponent = () => {
   // setup your form

  return (
      <InputWithRef 
        name="email"
        domRef={register({required: true})}
        type="email"
        placeholder="e.g. bobsmith@gmail.com"
        required
    />
  )
}

The withRef function will be included on the next release of the library

[phaitonican]

Thanks a lot. Unfortunately I get this error:

Type '{ domRef: any; name: string; type: string; placeholder: string; required: true; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<unknown>'.
  Property 'domRef' does not exist on type 'IntrinsicAttributes & RefAttributes<unknown>'.

When i try to use a prop in InputWithRef. Sorry i am new to react and have trouble understanding this ref stuff ...

[couds]

That seem to be an issue more with typescript than react And I'm not good in TS.

El dom., 4 de julio de 2021 16:21, phaitonican @.***> escribió:

Thanks a lot. Unfortunately I get this error:

Type '{ domRef: any; name: string; type: string; placeholder: string; required: true; }' is not assignable to type 'IntrinsicAttributes & RefAttributes'. Property 'domRef' does not exist on type 'IntrinsicAttributes & RefAttributes'.

When i try to use a prop. Sorry i am new to react and have trouble understanding this ref stuff ...

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/couds/react-bulma-components/issues/355#issuecomment-873600879, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAWE2SYCZZOZVMH5BTUIQKDTWBU5XANCNFSM47X54UWQ .

[couds]

Hi @phaitonican I think I made and error on the example (I never user useForm before) but I think it should be like this

const MyComponent = () => {
   // setup your form

  return (
      <InputWithRef 
        type="email"
        placeholder="e.g. bobsmith@gmail.com"
       {...register('email', {required: true})}
    />
  )
}

[phaitonican]

get same error i think its because i use typescript

[sebzieja]

export const InputWithRef = React.forwardRef<"input", any>((props, ref) => {
    return <Form.Input {...props} domRef={ref} />;
});

That piece of code works in TS. It is not so elegant as it only works for Form.Input, but works

[Asim-A]

export const InputWithRef = React.forwardRef<"input", any>((props, ref) => {
    return <Form.Input {...props} domRef={ref} />;
});

That piece of code works in TS. It is not so elegant as it only works for Form.Input, but works

I can confirm that this works, thank you @sebzieja 🤝