[useAutocomplete] Improve typeof groupOptions in useAutocomplete

[lewxdev]

What's the problem?

Currently, the following type is true regardless of the inputs passed in to useAutocomplete:

// pseudocode
typeof UseAutocompleteReturnValue<Value, ...>["groupedOptions"] = Value[] | AutocompleteGroupedOption<Value>[]

Essentially, the developer has to narrow or cast the type despite MUI being able to assert the correct type definition with the inputs of the useAutocomplete hook. I propose addressing the type definition here

What are the requirements?

• Validate the new types are valid in the given scenarios
  • When groupBy is passed typeof groupedOptions = AutocompleteGroupedOption<T>[]
  • When groupBy is omitted, typeof groupedOptions = T[]
• Validate the implementation doesn't interfere with existing types

What are our options?

• Leave as is

Proposed solution

We could do something like

useAutocomplete.d.ts

- function useAutocomplete<
-   Value,
-   Multiple extends boolean | undefined = false,
-   DisableClearable extends boolean | undefined = false,
-   FreeSolo extends boolean | undefined = false,
+   GroupBy extends ((option: Value) => string) | undefined = undefined,
- >(
-   props: UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>
+   props: UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, GroupBy>
- ): UseAutocompleteReturnValue<Value, Multiple, DisableClearable, FreeSolo>
+ ): UseAutocompleteReturnValue<Value, Multiple, DisableClearable, FreeSolo, GroupBy>

Effective implementation (abbreviated)

interface UseAutocompleteProps<
  Value,
  // ...,
  GroupBy extends ((option: Value) => string) | undefined = undefined
> {
  // ...,
  groupBy?: GroupBy;
}

interface UseAutocompleteReturnValue<
  Value,
  // ...,
  GroupBy extends ((option: Value) => string) | undefined = undefined
> {
  // ...,
  groupedOptions: GroupBy extends undefined ? Value[] : AutocompleteGroupedOption<Value>[];
}

Resources and benchmarks

This was pointed out by @spencermehta

Shouldn't the type here actually be conditional upon the type of the groupBy prop? If it is not provided the type should be T[] and if it is provided it should be Array<AutocompleteGroupedOption<T>>. With the current implementation I'm forced to handle the case that the options are of type T[] even if I've provided the groupBy prop.

Minimal working playground link

Search keywords:

[ZeeshanTamboli]

Essentially, the developer has to narrow or cast the type despite MUI being able to assert the correct type definition with the inputs of the useAutocomplete hook.

Can you show an example where you needed to narrow or cast the type? Your request makes sense to me. I don't think it would cause any issues or a breaking change. Want to give it a try by making a pull request?

[lewxdev]

Want to give it a try by making a pull request?

@ZeeshanTamboli I'll give it a shot. Starting to look into this now 👍🏽