Typescript react-select Custom Input Component InputProps type is incompatible

Issue

I cannot type the inputProps of React-Select’s Input Component. I checked the Input.d.ts, but it seems the InputProps interface is different from the other component such as ControlProps or OptionProps.

How should I implement it so that I can access the current input value and options inside the CustomInput component?

const CustomInput = (inputProps: any) => {
    ...
    return (
      <>
        <components.Input {...inputProps} />
        ...
      </>
    );
  };

<RcSelect
   components={{
     ...
     Input: CustomInput,
   }}
   ...
/>

Using any works for my purpose, but I need to type it to eliminate lint warning.

Solution

You should change inputProps type from any to InputProps by importing type InputProps, and in order to get options and value you have to destruct your object inputProps.

CustomInput.ts

import Select, {InputProps,OptionType,OptionsType,} from 'react-select';

const CustomInput = (inputProps: InputProps) => {
  const getValue: () => OptionsType<OptionType> = inputProps.getValue;
  const options: OptionsType = inputProps.options;
        
  console.log('value', getValue()); // <==== value
  console.log(options); // <==== options
        
  return <input {...inputProps} />; //
};

You can check this demo: https://stackblitz.com/edit/react-starter-typescript-jtpxxf?file=index.tsx

Answered By – Soufiane Boutahlil

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0