Custom Components and Typescript

[ghost]

I have been having an issue typing the onChange event when using a custom component for SingleValue. Everything seems to type correctly when following the typescript docs without any custom components

const handleChange = (option: OptionsType | null): void => {
  console.log(option?.value);
};

 <Select
      getOptionLabel={(option): string => option.label + ' ' + option.calories}
      onChange={handleChange}
      options={[
        { value: 'chocolate', label: 'Chocolate', calories: '100' },
        { value: 'strawberry', label: 'Strawberry', calories: '100' },
        { value: 'vanilla', label: 'Vanilla', calories: '100' },
      ]}
    />

This seems to work, and I can get typescript support inside my handleChange function.

As soon as I try to add a custom component, the onChange prop throws a type error.

const SingleValue = ({
  ...props
}: SingleValueProps<OptionsType>): ReactElement | null => (
  <components.SingleValue {...props}>{props.data.label}</components.SingleValue>
);

const handleChange = (option: OptionsType | null): void => {
  console.log(option?.value);
};

<Select
      components={{SingleValue}}
      getOptionLabel={(option): string => option.label + ' ' + option.calories}
      onChange={handleChange} // RETURNS ERROR
      options={[
        { value: 'chocolate', label: 'Chocolate', calories: '100' },
        { value: 'strawberry', label: 'Strawberry', calories: '100' },
        { value: 'vanilla', label: 'Vanilla', calories: '100' },
      ]}
    />

I then get the following type error on the onChange prop. This only happens once I add a custom component, otherwise the types are coming through correctly based on the isMulti prop being set or not.

EDIT: My guess is that I am not typing my SingleValue custom component correctly.

[Methuselah96]

If you're just doing a single select you can use SingleValueProps<OptionsType, false> which will fix your error.