[Autocomplete] getOptionLabel returns undefined for key that exists

• 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 am getting this error -> The getOptionLabel method of Autocomplete returned undefined instead of a string for “Simple Moving Average”.

Expected Behavior 🤔

The value for “Simple Moving Average” should be displayed in the AutoComplete as it exists in the list.

Steps to Reproduce 🕹

Consider this example in codesandbox -> https://jcphp.csb.app/

Steps:

1. Open the code sandbox example
2. Open developer tools
3. When the component mounts, you will see a bunch of errors like "The getOptionLabel method of Autocomplete returned undefined instead of a string for “Simple Moving Average”
4. When the component is being mounted onInputChange is also being triggered because of the value not being found in the list and hence it set’s it to blank string

Context 🔦

The use case is to render autocomplete component while mapping over a list. So if a list consists of 10 elements, 10 autocomplete components would be visible where each of the autocomplete input value is mapped to one of the object’s key in the list.

Your Environment 🌎

“@material-ui/lab”: “4.0.0-alpha.56” “react”: “^16.13.1” Chrome : Version 84.0.4147.135

[afrieirham]

Hi guys, it seems like more people are facing the same issue. Here is what I do to get rid of the error. I’m using this code sandbox as a demo: https://codesandbox.io/s/jcphp

In Demo.js line 155.

Just change getOptionLabel={(option) => option.indicatorName}

to
getOptionLabel={(option) => option.indicatorName ? option.indicatorName : ""}

This worked for me because it will return a string no matter if the option exists or not. I hope this helps.

[nihalwasheretoo]

@afrieirham No I am not, I have figured out a way to handle it, I am using the Autocomplete component a bit differently now.