useRef with typescript on custom input element

Question

I am struggling in using useRef on an input with typescript. I've checked many links like this one but I am still getting the same error.

const MainHeader: React.FC = () => {

const InputStyled = styled(Input)`
  // some basic css
`;

const searchElement = useRef<HTMLInputElement>(null);

return (
  <>
    <InputStyled full ref={searchElement} type="search" />
  </>
);
}

My Input component :

export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
  full?: boolean;
  medium?: boolean;
  light?: boolean;
};

const SearchField = styled.input<SearchFieldProps>`
  // css rules here
`;

const Input: React.FC<SearchFieldProps> = (props) => <SearchField {...props} />;

export default Input;

I am not doing anything exotic here I think, but it returns :

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | "type" | "name" | "defaultChecked" | ... 279 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ ref: RefObject<HTMLInputElement>; full: true; placeholder: string | undefined; type: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | ... 282 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }'.
      Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | ... 282 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<FC<SearchFieldProps>, any, {}, never, FC<SearchFieldProps>>): ReactElement<...>', gave the following error.
    Type '{ ref: RefObject<HTMLInputElement>; full: true; placeholder: string | undefined; type: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | ... 282 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }'.
      Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | ... 282 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }'.

Any idea/advice is welcome !

Thanks

Looks like it wants your `InputStyled` component to have the `ref` prop declared. I've not used style components, but maybe you create a wrapper that adds in the ref prop and returns the style component? — HaveSpacesuit, Feb 16 '21 at 22:04

Sam · Accepted Answer · 2021-02-17T01:43:57.843

2

You need to use forwardRef for your use case. Your Input component should be like below.

import React from "react";
import styled from "styled-components";

export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
  full?: boolean;
  medium?: boolean;
  light?: boolean;
 
};

const SearchField = styled.input<SearchFieldProps>`
  // css rules here
`;

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

export default Input;

2nd Solution

import React, { FC } from "react";
import styled from "styled-components";

export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
  full?: boolean;
  medium?: boolean;
  light?: boolean;
  ref?: React.ForwardedRef<HTMLInputElement>;
};

const SearchField = styled.input<SearchFieldProps>`
  // css rules here
`;

const Input: FC<SearchFieldProps> = React.forwardRef((props, ref) => (
  <SearchField {...props} ref={ref} />
));

export default Input;

edited Feb 17 '21 at 01:43

answered Feb 16 '21 at 23:10

Sam

1,040
1
7
11

1

Hi @johann, I added a second solution for you, You need to add a ref prop on your props. – Sam Feb 17 '21 at 01:44
Thanks @Sam for your reply. When trying with your version, I have an `Property 'light' does not exist on type 'IntrinsicAttributes & RefAttributes'` ..If I replace `HTMLInputElement` by `SearchFieldProps` result is the same, it will break the other `Input` without ref` defined. – johann Feb 17 '21 at 01:50
Thanks @Sam. But how to make it working with I without `ref` propertie? Is it possible ? – johann Feb 17 '21 at 02:34

useRef with typescript on custom input element

1 Answers1