[useAutocomplete] groupedOptions type definition seems wrong

Hey, I think I found a mistake in the type definitions for useAutocomplete. Happy to take a crack at fixing it, but I wanted to put an issue up first to make sure it wasn’t like that for a reason.

---

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I’m getting these type errors when using groupedOptions from the useAutocomplete hook, when using the actual code in the Autocomplete component that consumes groupedOptions.

TS2339: Property 'key' does not exist on type 'T'.
TS2339: Property 'group' does not exist on type 'T'.
TS2339: Property 'options' does not exist on type 'T'.
TS7006: Parameter 'option2' implicitly has an 'any' type.
TS7006: Parameter 'index2' implicitly has an 'any' type.
TS2339: Property 'index' does not exist on type 'T'.

The type mapping indicates that groupedOptions is T[], but the code in useAutocomplete seems to actually return a different type if groupBy is defined. Here’s the relevant code from useAutocomplete:

  let groupedOptions = filteredOptions;
  if (groupBy) {
    // used to keep track of key and indexes in the result array
    const indexBy = new Map();
    let warn = false;

    groupedOptions = filteredOptions.reduce((acc, option, index) => {
      const group = groupBy(option);

      if (acc.length > 0 && acc[acc.length - 1].group === group) {
        acc[acc.length - 1].options.push(option);
      } else {
        if (process.env.NODE_ENV !== 'production') {
          if (indexBy.get(group) && !warn) {
            console.warn(
              `Material-UI: The options provided combined with the \`groupBy\` method of ${componentName} returns duplicated headers.`,
              'You can solve the issue by sorting the options with the output of `groupBy`.',
            );
            warn = true;
          }
          indexBy.set(group, true);
        }

        acc.push({
          key: index,
          index,
          group,
          options: [option],
        });
      }

      return acc;
    }, []);
  }

And the relevant type definition in useAutocomplete.d.ts:

export default function useAutocomplete<
  T,
  Multiple extends boolean | undefined = undefined,
  DisableClearable extends boolean | undefined = undefined,
  FreeSolo extends boolean | undefined = undefined
>(
  props: UseAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>
): {
  ...
  groupedOptions: T[];
};

Expected Behavior 🤔

I shouldn’t get type errors here. Ideally the typing should be T[] if groupBy isn’t defined, and something like { key: number, index: number, group: string, options: T[] } if it is defined.

Steps to Reproduce 🕹

TS playground was having trouble importing @material-ui/lab, so I just used codesandbox, which was closer to the errors I’m actually getting in my editor.

https://codesandbox.io/s/material-ui-issue-forked-ky88t?file=/src/Demo.tsx

Steps:

1. Observe type errors

Context 🔦

I’m working on a custom autocomplete component that allows more granular control around the behavior of the freeSolo aspect. The stock Autocomplete behavior for that doesn’t work for my purposes here, so I’m building something custom to allow the addition of actions as additional options, which would be in their own group. These TS errors appeared when copying some pieces of the stock Autocomplete component into my codebase. Since it’s a custom component, I can cast the types manually, so it’s not holding me up now; But the type definition seems obviously wrong, no?

Your Environment 🌎

Tech	Version
Material-UI	v4.11.1
React	v17.0.1
Browser	N/A
TypeScript	v4.0.3

[oliviertassinari]

@ZachCMP If you could open a pull request, that would definitely help 😃

[ZachCMP]

@oliviertassinari Yeah, I think a union type of T[] | AutocompleteGroupedOption<T>[] for groupedOptions would be good enough. Let me know if there’s anything I can do to help. Also happy to give it a shot and submit a PR. Whatever’s best for you.