material-ui: [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:

Open the code sandbox example
Open developer tools
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”
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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 15 (1 by maintainers)

Most upvoted comments

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.

+34

afrieirham on May 6, 2021

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

+30

nihalwasheretoo on Dec 19, 2020

@nihalwashere Would be kind if you could tell us how you use it now…

+17

Myzel394 on Apr 1, 2021

I ended up doing this. I am using my autocomplete in an adding/editing situation so I need the field to populate with the data when editing. This is where I was having most of the trouble. My options prop is an array of objects but what I want to save to the backend is just the name property of the selected value. On the add with blank values initialValues, option.name works but when I fetch from my backend and just have string names, option.name no longer works hence just grab the option.

To get rid of the error for my situation, I did:

getOptionLabel={(option) => {
          if (option.hasOwnProperty('name')) {
            return option.name;
          }
          return option;
        }}

Thank you @afrieirham for sharing yours. It was helpful!

+13

rclarkem-fubotv on May 6, 2021

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

support[bot] on Aug 31, 2020

I solved this problem by just setting values like this. Because the option may be your object or a string. So that it don’t have property getOptionLabel={ (option: Object | string) => option['label'] || option }

fissama on Oct 12, 2022

@nihal9ns are you still facing this issue? im having the same error and i believe this hasn’t been fixed yet.

afrieirham on Dec 18, 2020