Autocomplete throws error message

[Chibuzor-Nwemambu]

Describe the bug
Autocomplete throws error message when optionsComponent is used.
A clear and concise description of what the bug is.
In order to use Autocomplete, you need either an optionLabel or optionComponent, and this seemed to work fine. However, by Wednesday 12th or Thursday 13th July(not sure which exactly), I noticed that my component throws an error saying optionComponent is not a function. It also throws an error requiring optionsLabel even though optionsComponent is provided. It is almost like it doesn't recognise optionComponent.

Another weird thing I noticed is that this only occurs in local build but it seems to work okay in other environments
Steps to reproduce the bug

1.Create an Autocomplete dropdown
2.use optionComponent and not optionLabel
3.
4.

Expected behavior
A dropdown should appear with individual items from my array
A clear and concise description of what you expected to happen.

Specifications

• Version: 0.30.0
• Browser: Chrome
• OS:

Additional context

Add any other context or screenshots about the bug. An example in CodeSandbox is very helpful

[oddvernes]

optionLabel is required when using optionComponent, see storybook.

[olavis]

Agree @Chibuzor-Nwemambu, it doesn't matter much whether or not this is categorised as a bug, the component is poorly described.

@oddvernes I'd expect optionLabel to be typed better if it's required, it's just an optional parameter and the only description provided (Autocomplete.d.ts) is Custom option label. 🧐 I couldn't find this in the storybook either, perhaps you could add some screenshots to show where to find it?

[oddvernes]

I guess i can make it bold with red blinking arrows pointing at it 😂 But seriously I'll update the description for optionLabel to note it is required when option is an object 👍

[oddvernes]

@Chibuzor-Nwemambu have you been able to make this work? I need to know if I can close this issue.

By the way I now notice you say you are on version 0.30.0 but optionComponent was only added in 0.31.0 just in case that is the problem🤔

[olavis]

I guess i can make it bold with red blinking arrows pointing at it 😂 But seriously I'll update the description for optionLabel to note it is required when option is an object 👍

@oddvernes thank you! I wasn't looking for a "Customized option component", so I guess that's why I couldn't find it there. It wasn't intuitive to me why I should get the error, though.. I think I understand more how it was meant to be used now - I am using objects as options, but didn't get any ts-errors by doing so. When is optionLabel not required? Only when options is of inferred type string[]? I think it could be nice to group the parameters in Autocomplete, because it wouldn't make sense that optionLabel is defined when typeof options isn't (required).

[olavis]

@oddvernes I guess if options and optionLabel was grouped, you'd be able to use conditional types to set a more precise type for optionLabel (required/optional). Then the documentation would be built-in, so you wouldn't have to document as much, get bug-reports like this and to answer silly questions with screenshots from people like me. 🤓

[oddvernes]

Yes we should definetly try and make typescript complain when optionlabel is not present if options are objects (and not when they are strings) 👍 For now i have updated the prop table in storybook for optionsLabel

[olavis]

@oddvernes How about this?

type Options<T extends Array<unknown>> = T extends Array<string>
  ? Array<string>
  : { objects: T; label: (option: T[number]) => string }

Defining options in Autocomplete: options: Options<T[]>

Example, using string[] and MyOptionType as object type:

type StringType = Options<string[]> // string[]
type ObjectType = Options<
  {
    label: string
    symbol?: string | undefined
    trend?: string | undefined
  }[]
> /*
  {
    objects: {
        label: string;
        symbol?: string | undefined;
        trend?: string | undefined;
    }[];
    label: (option: {
        label: string;
        symbol?: string | undefined;
        trend?: string | undefined;
    }) => string;
  }
 */

Then you'd define options like this when you're using objects as options (it type errors if you don't include label and informs about the missing properties) options={{ objects: options, label: optionLabel }}, and yet no complaints from TypeScript if you define options as string array: options={['Option1', 'Option2']}.

[Chibuzor-Nwemambu]

@Chibuzor-Nwemambu have you been able to make this work? I need to know if I can close this issue.

By the way I now notice you say you are on version 0.30.0 but optionComponent was only added in 0.31.0 just in case that is the problem🤔

@oddvernes Yes I have, thanks a lot for the response