[Autocomplete] Pass `getOptionLabel` as a parameter to `renderOption`

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

The renderOption callback of the Autocomplete component could receive the components getOptionLabel callback a a fourth parameter. This would allow customizing the rendering of the options globally in the theme, while still being able to define the property to be shown on an individual basis.

Maybe even the whole AutocompleteOwnerState could be provided, as It has already been done for renderTags: https://github.com/mui/material-ui/pull/32637

Examples 🌈

No response

Motivation 🔦

Let’s say I want to add a ripple effect to all of my Autocomplete options. In the current version, I could define the renderOption property as a defaultProp for Autocomplete in the Theme.

Theme.tsx

MuiAutocomplete: {
    defaultProps: {
      renderOption: (props: HTMLAttributes<HTMLLIElement>, option: any, state: AutocompleteRenderOptionState) => {
        return <ButtonBase>{option.label}</ButtonBase>;
      },
    },
},

However this approach would have to assume that the type of the options every Autocomplete in the app receives has to be equal. I suppose the getOptionLabel exists exactly for this purpose, but I cannot access it in the theme. When this would be the case, I could access the function in the theme and provide the getOptionLabel individually in every Autocomplete instance I use:

Theme.tsx

MuiAutocomplete: {
    defaultProps: {
      renderOption: (props: HTMLAttributes<HTMLLIElement>, option: any, state: AutocompleteRenderOptionState, getOptionLabel) => {
        return <ButtonBase>{getOptionLabel(option)}</ButtonBase>;
      },
    },
},

MyComponent.tsx

type Option = { name: string }

const MyComponent = (options: Option[]) => {
  return <Autocomplete options={options} getOptionLabel={(option) => option.name} .../>
}

[FionaDL]

@ZeeshanTamboli Do you mind me asking if you are working on this? I was thinking about possibly picking it up if you aren’t.

[ZeeshanTamboli]

@ZeeshanTamboli I can try, but it will take some time.

No problem at all!