[AutoComplete] undefined text when enter is pressed using "freeSolo" with "getOptionLabel"

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using the freeSolo along with getOptionLabel on an array of objects, and the user types any value and presses enter, the inputTextBox will have “undefined”.

export default function FreeSolo() {
  return (
    <Autocomplete
      freeSolo
      id="free-solo-2-demo"
      disableClearable
      options={top100Films}
      getOptionLabel={(option) => (option ? option["title"] : "")}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Search input"
          InputProps={{
            ...params.InputProps,
            type: "search"
          }}
        />
      )}
    />
  );
}

const top100Films = [
  { id: 1, title: "The Shawshank Redemption", year: 1994 },
  { id: 2, title: "The Godfather", year: 1972 }
];

code sandbox here

Expected behavior 🤔

Input should not change when pressing enter, at least in freeSolo mode.

Steps to reproduce 🕹

Steps:

1. type any value in the search input
2. press enter
3. search input text will be “undefined” instead of the current in input

Context 🔦

No response

Your environment 🌎

No response

[zishiwu123]

@alikleitcr7 here is a workaround so you can keep using getOptionLabels:

getOptionLabel={(option) => (option["title"] ? option["title"] : option)}

This way if the input option is a string and not an object, option["title"] will evaluate to false and option string will be displayed instead of undefined.

[michaldudak]

Thanks for the analysis, @zishiwu123. What happens here is the type mismatch. In @alikleitcr7’s example options are objects ({ title, year }). The value typed into the input is a string. After the value is committed by pressing <kbd>Enter</kbd>, getOptionLabel runs on the value. It tries to call option["title"] on a string, which understandably fails.

Converting options to strings is likely the best option to overcome this problem. Alternatively, you could update your getOptionLabel function so it does not return undefined when it’s called with a string.

I’ll update the docs so it’s more clear what to expect when using freeSolo.