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
– HaveSpacesuit, Commented Feb 16, 2021 at 22:04

Sam · Accepted Answer · 2021-02-17 01:43:57Z

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, 2021 at 1:43

answered Feb 16, 2021 at 23:10

Sam

1,2591 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sam Over a year ago

Hi @johann, I added a second solution for you, You need to add a ref prop on your props.

johann Over a year ago

Thanks @Sam for your reply. When trying with your version, I have an Property 'light' does not exist on type 'IntrinsicAttributes & RefAttributes<HTMLInputElement>' ..If I replace HTMLInputElement by SearchFieldProps result is the same, it will break the other Input without ref` defined.

johann Over a year ago

Thanks @Sam. But how to make it working with I<nput> without ref propertie? Is it possible ?

Collectives™ on Stack Overflow

useRef with typescript on custom input element

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related