reactjsautocompletematerial-ui

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. enter image description here

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

enter image description here

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>
            )
      />