CODEWITHSUNDEEP
reactjsmaterial-ui
vuvu
vuvu

Reputation: 5328

Custom options cannot be selected in MUI Autocomplete?

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" />}
/>

Upvotes: 2

Views: 1242

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81370

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

Upvotes: 2

Related Questions