Cannot passing ref to react-select because of type error

[MikePrus]

I'm trying to the passing ref to Select imported from react-select and receiving type error. Which tell that:

Type 'ForwardedRef' is not assignable to type 'Ref<Select<OptionType, boolean, GroupBase>> | undefined

import Select, { Props } from 'react-select';

const Dropdown: React.FC<Props> = forwardRef<Select, Props>(
  ({ value, options }, ref) => {
    return (
      <Select
        ref={ref}
        options={options}
        value={value}
        components={{
          DropdownIndicator
        }}
      />
    );
  }
);

export default Dropdown;

Here is a link to sandbox.

So, It will be great if somebody gives an example of using Select with forwardRef. I will be appreciated the help.

[fwextensions]

I see a similar issue with a slightly differently-typed component (irrelevant stuff removed):

const SelectTest = forwardRef(<
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>
>(
  props: Props<Option, IsMulti, Group>,
  ref: Ref<Select> | undefined) =>
{
  const { options, ...restProps } = props;

  return (
    <Select
      {...restProps}
      ref={ref}
      options={options}
    />
  );
});

I get the error:

Type 'Ref<StateManagedSelect> | undefined' is not assignable to type 'Ref<Select<Option, IsMulti, Group>> | undefined'.

Since StateManagedSelect isn't used anywhere in this code, I'm not sure why it's being referenced. And changing that line to ref: Ref<Select<Option, IsMulti, Group>> | undefined shows an error Type 'StateManagedSelect' is not generic..

This is well beyond my TypeScript understanding.

[Methuselah96]

The ref should be typed with SelectInstance (imported from react-select).

[fwextensions]

Hmm, I'd definitely tried SelectInstance at one point, but apparently hadn't gotten everything right to make it work.

Extending my verbose approach above, this seems to work:

const SelectTest = forwardRef(<
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>
>(
  props: Props<Option, IsMulti, Group>,
  ref: ForwardedRef<SelectInstance<Option, IsMulti, Group>>) =>
{ ... } 

I tried to simplify it to this, but then got the error below:

const SelectTest = forwardRef<SelectInstance, Props>((props, ref) =>
{ ... }

The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & Omit<Pick<Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | ... 26 more ... | "form"> & InexactPartial<...> & InexactPartial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'

So it looks like specifying the type parameter on the component function is still required, but I don't really understand why. I tried to include the type params on the forwardRef() call, but couldn't make it work. This is the simplest approach I've found that didn't cause any TypeScript errors:

const SelectTest = forwardRef(<
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>
>(
  props: Props,
  ref: ForwardedRef<SelectInstance>) =>
{ ... } 

[JanderSilv]

Hey @Methuselah96, sorry bother you with this, but I'm really struggling to create a reusable custom select.
It's working nicely without React.forwardRef.
Trying to pass forwardRef and using without the SelectComponent type below, makes loses the capability of generics at the component instance. And typing the Select component with SelectComponent type, brings up the error of the image.

export type SelectProps<
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>
> = ReactSelectProps<Option, IsMulti, Group> & FieldProps

export type SelectComponent = <
Option,
IsMulti extends boolean = false,
Group extends GroupBase<Option> = GroupBase<Option>
>(
  props: SelectProps<Option, IsMulti, Group>,
) => React.ReactElement | null

export const Select: SelectComponent = React.forwardRef(
  <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
    props: SelectProps<Option, IsMulti, Group>,
    ref: React.Ref<SelectInstance<Option, IsMulti, Group>>,
  ) => {}

Error:

I appreciate any help 🙏🏻

[Methuselah96]

@JanderSilv You're going to have to cast it unfortunately. This is what we do internally.

[JanderSilv]

It worked, thanks.

[stychu]

So given all examples here Im still unable to type the custom wrapper Select that is handled with forwardRef... Can someone help me with this? Given this example im unable to type the onChange handler further whenever i want to use the custom select...

import { forwardRef } from 'react';

import ReactSelect, { components } from 'react-select';

import { cn } from '$/lib/utils';


import type { ControlProps, GroupBase, Props } from 'react-select';
import type { StylesConfig } from 'react-select/dist/declarations/src/styles';

import type {} from 'react-select/base';

declare module 'react-select/base' {
  export interface Props<
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>,
  > {
    errorMessage?: string;
    label?: string;
  }
}


// Cant find any handle fot the forwardRef ref type...
const BaseSelect = forwardRef<any, Props>(
  ({ name, className, ...props }, ref) => {
    return (
      <ReactSelect
        {...props}
        ref={ref}
        menuPortalTarget={typeof window !== 'undefined' ? document.body : null}
        id={`${name}-select`}
        instanceId={`${name}-select`}
        className={cn('mt-2', className)}
        styles={styles}
        components={{ Control: SelectControl }}
      />
    );
  },
);
BaseSelect.displayName = 'BaseSelect';

and later if i want

<Select
        name="facilityType"
        label="Select facilty type"
        className="max-w-sm mb-2"
        isDisabled={isFetching}
        isLoading={isFetching}
        options={facilityTypes}
        onChange={(
          facility: Facility,
        ) => onSelect(facility.id)}
      />
      ```
      
      ```
      Facility not assignable to type
(newValue: unknown, actionMeta: ActionMeta<unknown>) => void
Types of parameters  facility  and  newValue  are incompatible.
Type  unknown  is not assignable to type
{     value: string;     label: string;     id: string; }

[JanderSilv]

My custom component:

import { Props } from 'react-select'

type GroupBase<Option> = {
  readonly options: readonly Option[]
  readonly label?: string
}

type SelectProps<
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>
> = Props<Option, IsMulti, Group> & {
  // your custom props
}

type SelectComponent = {
  <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
    props: SelectProps<Option, IsMulti, Group>,
  ): React.ReactElement | null
  displayName?: string
}

const Select = React.forwardRef(
  <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
    props: SelectProps<Option, IsMulti, Group>,
    ref: React.Ref<SelectInstance<Option, IsMulti, Group>>,
  ) => {
   // your component here
  }) as SelectComponent

Select.displayName="Select"

[stychu]

@JanderSilv Thanks man ! Tho Im still unable to satisfy the typescript for ref type of ReactSelect I managed to get overall typing of the component and other type reference of React-Select props seems to be inffered properly such as onChange formatOptionLabel and others.

'use client';

import { forwardRef } from 'react';

import { useController } from 'react-hook-form';
import ReactSelect, { components } from 'react-select';

import { cn } from '$/lib/utils';

import type { FieldValues, UseControllerProps } from 'react-hook-form';
import type {
  ControlProps,
  GroupBase,
  Props,
  SelectInstance,
} from 'react-select';
import type { StylesConfig } from 'react-select/dist/declarations/src/styles';

import type {} from 'react-select/base';

declare module 'react-select/base' {
  export interface Props<
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>,
  > {
    errorMessage?: string;
    label?: string;
  }
}

const SelectControl = ({ children, ...props }: ControlProps) => {
  const { errorMessage, label } = props.selectProps;

  return (
    <div>
      {!!label && (
        <p
          className={cn(
            'pb-2 font-bold text-dimmed',
            !!errorMessage && 'text-error-500',
          )}
        >
          {label}
        </p>
      )}
      <components.Control {...props}>{children}</components.Control>
      {!!errorMessage && <p className="pt-2 text-error-500">{errorMessage}</p>}
    </div>
  );
};

type BaseSelectComponent = {
  <
    Option,
    IsMulti extends boolean = false,
    Group extends GroupBase<Option> = GroupBase<Option>,
  >(
    props: Props<Option, IsMulti, Group>,
  ): React.ReactElement | null;
  displayName?: string;
};

export const BaseSelect = forwardRef(
  <
    Option,
    IsMulti extends boolean = false,
    Group extends GroupBase<Option> = GroupBase<Option>,
  >(
    { name, className, ...props }: Props<Option, IsMulti, Group>,
    ref: React.Ref<SelectInstance<Option, IsMulti, Group>>,
  ) => {
    return (
      <ReactSelect
        {...props}
        //@ts-expect-error can't figure out how to type ref properly
        ref={ref}
        menuPortalTarget={typeof window !== 'undefined' ? document.body : null}
        id={`${name}-select`}
        instanceId={`${name}-select`}
        className={cn('mt-2', className)}
        components={{ Control: SelectControl }}
      />
    );
  },
) as BaseSelectComponent;

BaseSelect.displayName = 'BaseSelect';

type FormSelectProps<
  T extends FieldValues,
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>,
> = Omit<Props<Option, IsMulti, Group>, 'name'> &
  Omit<UseControllerProps<T>, 'disabled'>;

const FormSelect = <
  T extends FieldValues,
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>,
>({
  name,
  control,
  ...props
}: FormSelectProps<T, Option, IsMulti, Group>) => {
  const { field, fieldState } = useController({
    name,
    control,
    disabled: props.isDisabled,
  });

  return (
    <BaseSelect
      {...props}
      {...field}
      name={name}
      errorMessage={fieldState.error?.message}
    />
  );
};

export const Select = <
  T extends FieldValues,
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>,
>(
  props: FormSelectProps<T, Option, IsMulti, Group>,
) => {
  if (props.control) return <FormSelect {...props} />;

  return <BaseSelect {...props} />;
};