formatOptionLabel - Type 'unknown' is not assignable

[binhxn]

Hello!

I'm attempting to change the option labels in the menu/control, but am running into TS errors after upgrading from v4+ to v5.2.2. Here's a simplified version of the code I'm working with:

const formatOptionLabel = (
    { label, name }: Partial<UserOption>, // destructured properties are defined in UserOption
    { context }: string,
  ): ReactNode => {
    if (context === 'value') {
      return <>{label}</>;
    }

    return (
      <div>
        <p>{name}</p>
      </div>
    );
  };

return (
  <Search
    /* formatOptionLabel returns the TS error below
  Type '(data: Partial<UserOption>, { context }: Context) => ReactNode' is not assignable to type '(data: unknown, formatOptionLabelMeta: FormatOptionLabelMeta<unknown>) => ReactNode'.
  Types of parameters 'data' and 'data' are incompatible.
    Type 'unknown' is not assignable to type 'Partial<UserOption>'
    */
    formatOptionLabel={formatOptionLabel}
  />
)

I feel like I've defined formatOptionLabel enough so that it would satisfy the unknown issue. Any thoughts on how to resolve this? Thanks in advance!

[Methuselah96]

I noticed you're using a component called Search? How is that defined? Most likely the Search component is not correctly forwarding the generics from Select to Search. See the section on "Wrapping the Select component" in the TypeScript guide for more details.

[binhxn]

Yeah, I forgot to clarify that. Search is an extension of my custom Select component, which is a wrapper around React Select. Your link is helpful, but a few more TS issues sprung up after following the TS guide:

1. I'm attempting to replace the DropdownIndicator component (based on the Replaceable component example), but don't know how to interpret this error (Please see the screenshot below). The issue also persists when removing ...components.
2. It's unclear how to forward refs from the Search component. I can technically wrap Select with forwardRef, but I'll end up getting the formatOptionLabel TS issue as mentioned in my first post.

Full TS error here

Type '((props: DropdownIndicatorProps<unknown, boolean, GroupBase<unknown>>) => Element) | ComponentType<DropdownIndicatorProps<Option, IsMulti, Group>> | null | undefined' is not assignable to type 'ComponentType<DropdownIndicatorProps<Option, IsMulti, Group>> | null | undefined'.
  Type '(props: DropdownIndicatorProps) => JSX.Element' is not assignable to type 'ComponentType<DropdownIndicatorProps<Option, IsMulti, Group>> | null | undefined'.
    Type '(props: DropdownIndicatorProps) => JSX.Element' is not assignable to type 'FunctionComponent<DropdownIndicatorProps<Option, IsMulti, Group>>'.
      Types of parameters 'props' and 'props' are incompatible.
        Type 'PropsWithChildren<DropdownIndicatorProps<Option, IsMulti, Group>>' is not assignable to type 'DropdownIndicatorProps<unknown, boolean, GroupBase<unknown>>'.
          Types of property 'selectOption' are incompatible.
            Type '(newValue: Option) => void' is not assignable to type '(newValue: unknown) => void'.
              Types of parameters 'newValue' and 'newValue' are incompatible.
                Type 'unknown' is not assignable to type 'Option'.
                  'Option' could be instantiated with an arbitrary type which could be unrelated to 'unknown'.ts(2322)

Curious to hear your thoughts on this.

[Methuselah96]

DropdownIndicator needs to be generic as well. See how it's implemented in react-select for how to make it generic. That might not completely fix it, but it is a necessary next step.

[Methuselah96]

forwardRef does not play nice with generic props. As far as I know the only solution is to cast it. See how we do that in react-select.

[binhxn]

I never got to resume work on this, but will mark this as resolved based on your responses and references you have provided. Thanks again!