Property 'current' is missing in type '(ref: ElementLike | null)

Hi, first of all, this lib looks awesome!

Now, what I’m trying to do is use custom styled components (Form, Input, …) with TypeScript and this lib but I keep running in issues regarding typings of ref. I’ve tried a couple of things now and this seems most correct, however, TS still complains about the return value of register vs the types of the ref prop.

I have this basic form with an email & password input.

const SignIn = () => {
  const { register, handleSubmit } = useForm();

  const onSubmit = handleSubmit((data: any) => {
    console.log({ data });
  });

  return (
    <Layout>
      <h1>Sign in</h1>
      <Form onSubmit={onSubmit}>
        <Form.Field>
          <Form.Label htmlFor="email">Email</Form.Label>
          <Form.Input
            id="email"
            type="email"
            name="email"
            forwardRef={register({ required: true })}
          />
        </Form.Field>
        <Form.Field>
          <Form.Label htmlFor="password">Password</Form.Label>
          <Form.Input
            id="password"
            type="password"
            name="password"
            forwardRef={register({ required: true })}
          />
        </Form.Field>
        <Form.Field>
          <Form.Button type="submit">Sign in</Form.Button>
        </Form.Field>
      </Form>
    </Layout>
  );
};

This is my custom styled Input component

const Container = styled.input`
  background: #F00;
`;

interface Props
  extends DetailedHTMLProps<
    InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  forwardRef?: RefObject<HTMLInputElement>;
}

const Input = (props: Props) => {
  return <Container {...props} ref={props.forwardRef} />;
};

But I keep getting Property 'current' is missing in type '(ref: ElementLike | null) => void' but required in type 'RefObject<HTMLInputElement>'.

Example repository

https://github.com/wouterds/ts-react-hook-form

[stramel]

@wouterds Is there a reason, you are using a prop called forwardRef instead of using the React.forwardRef function?

const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
  return <Container {...props} ref={ref} />;
});

// Usage
<Form.Input
  id="email"
  type="email"
  name="email"
  ref={register({ required: true })}
/>

[stramel]

Personally, I would go with

import React, {
  forwardRef,
  DetailedHTMLProps,
  InputHTMLAttributes,
  Ref,
} from 'react';
import { Container } from './styles';

type Props = DetailedHTMLProps<
  InputHTMLAttributes<HTMLInputElement>,
  HTMLInputElement
>;

export default forwardRef<HTMLInputElement, Props>(function Input(props, ref) {
  return <Container {...props} ref={ref} />;
});

Which should fix your displayName linting error