[Autocomplete] `getOptionLabel` callback is getting the value instead of option object

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using different types for options and value properties, the getOptionLabel method is passed value instead of option object.

let’s say I’m using following types:

type Option = { label: string; value: any; group?: string }
type Value = string;

I’m expecting getOptionLabel method always passed an Option type but that’s not the case. That’s why the picked option can not be displayed properly.

getOptionLabel={(option) => option.label || "!!!"} //here sometimes Value type is passes instead of Option type.
isOptionEqualToValue={(option, value) => return option.value === value}

Expected behavior 🤔

Always pass and option to getOptionLabel as a param to be consistent.

Steps to reproduce 🕹

Here’s a demo: https://codesandbox.io/s/controllablestates-material-demo-forked-0lekyg?file=/demo.js

Steps:

1. Render a controlled Autocomplete component using different types for options and value props. (object and string)
2. Utilize isOptionEqualToValue and getOptionLabel callback props

Context 🔦

I’m trying to render options that are objects like {label:“Label”, value:“some value”}, but I want to use the value of the selected option instead of the whole option object.

Your environment 🌎

No response

[lovervoorde]

For my use-case, I wanted to have the option as a string because my onChange uses the value to update an object in redux state, and I don’t want the label in there as well.

[ZeeshanTamboli]

Okay I am re-opening the PR.