[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 👍🏽

[mj12albert]

Hey @lewxdev do you still have a need for this? (or are you still interested in looking into it)

[lewxdev]

do you still have a need for this? (or are you still interested in looking into it)

@mj12albert I wasn't able to wrangle the types in the way that I originally outlined (when used, the option param on groupBy was not inferred correctly). For now, I've opted to use function overloads to achieve the original goal.

Open to feedback and suggestions here: #44657

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@lewxdev How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.