[Autocomplete] Access default getOptionLabel in renderOption

[emlai]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

We are overriding the default renderOption but we cannot access getOptionLabel in the custom renderOption function, to get the correct label.

I propose exposing getOptionLabel via the ownerState parameter of renderOption, i.e. adding it to this object:

material-ui/packages/mui-material/src/Autocomplete/Autocomplete.js

Lines 484 to 495 in 6f7acbb

	const ownerState = {
	...props,
	disablePortal,
	expanded,
	focused,
	fullWidth,
	hasClearIcon,
	hasPopupIcon,
	inputFocused: focusedTag === -1,
	popupOpen,
	size,
	};

Examples 🌈

This is our component override:

 defaultProps: {
    // ...
    renderOption: (
      props,
      option: React.ReactNode | { label: React.ReactNode },
      { selected },
      ownerState
    ) => {
      return (
        <li {...props}>
          {selected && <CheckIcon />}
          {
            // Work around not having access to the getOptionLabel prop here.
            typeof option === "object" && option != null && "label" in option
              ? option.label
              : option

            // Ideally the above code would be just this: (so it would work with other label props as well)
            ownerState.getOptionLabel(option)
          }
        </li>
      );
    },
  },

Motivation 🔦

If this feature is not added, we would need to drop support for getOptionLabel in our lib in order to use renderOption.

[emlai]

Actually, getOptionLabel is passed in ownerState if a user passes a custom getOptionLabel. But the default getOptionLabel is not passed. So this seems more like a bug.

[ZeeshanTamboli]

You are correct; there is a bug. We forgot to pass the default getOptionLabel prop to ownerState in #36971. All props with default values should be explicitly passed to ownerState.

The addition of ownerState as a fourth parameter to renderOption was to enable global customization of different options (#33423) in the pull request #36971, which caused this issue to surface up. You can see the demo here - https://mui.com/material-ui/react-autocomplete/#globally-customized-options. This change was released in v5.14.0. I'm glad to see that you are using it.

[emlai]

Also noticed that the internal value is not passed to ownerState. (I need it for custom styles set only when an option is selected.)

[ZeeshanTamboli]

@emlai Would you like to create a PR?

[emlai]

No, we already have a workaround in place

[DSK9012]

@ZeeshanTamboli
I've fixed the issue and raised PR. Please review.

[DSK9012]

Also noticed that the internal value is not passed to ownerState. (I need it for custom styles set only when an option is selected.)

@emlai, Which value your referring? Coz I see both TextField inputValue and selected options value is accessible in renderOption.

• inputValue you can access from option state - 3rd param.
• value you can access from ownerState - 4th param.

Moreover, if you want to style based on selected. This is also available from option state param.