[SOLVED] Material Ui Autocomplete - Filtering options is not working as expected

Material Ui Autocomplete - Filtering options is not working as expected

I have Autocomplete where I pass an array of fetched and predefined options... https://codesandbox.io/s/geocoding-demo-forked-2f189?file=/src/App.js

When I type e.g. "Diestsestraat Leuven" it doesn't display any options, but when I console.log it I see array of options.

I fixed this with this answer - https://stackoverflow.com/a/68506363/16002090 (I added - filterOptions={(options) => options} and it displays list of options...)

But then it doesn't filter out predefined options (see screenshot)

Any suggestions?

Solution

In my case, I tried adding key to renderOption solutions. Reference: here

 <Autocomplete
        ...
          renderOption={(props, item) => (
                  <li {...props} key={item.key}>
                    <ListItemText>{item.label}</ListItemText>
                  </li>
        )
  />