Custom options cannot be selected in MUI Autocomplete?

user_2204835 0
Viewed 350

I want to use the MUI Autocomplete with a custom renderOption property. Doing so I cannot select an option anymore. What is wrong?

sandbox

<Autocomplete
  disablePortal
  id="combo-box-demo"
  options={top100Films}
  sx={{ width: 300 }}
  renderOption={(props, option) => (
    <div style={{ padding: "4px 10px" }}>
      {option.label + " " + option.year}
    </div>
  )}
  renderInput={(params) => <TextField {...params} label="Movie" />}
/>
material-ui reactjs
1 Answers

You need to spread the props provided by MUI Autocomplete. Without it, MUI cannot provide onClick to know when the option changes or key to identify the option, so your option doesn't work:

renderOption={(props, option) => (
  <div {...props} style={{ padding: "4px 10px" }}>
    {option.label + " " + option.year}
  </div>
)}

Codesandbox Demo

user_94494260
Related