Material UI autocomplete duplicate key warning

Question

I am using Material UI through a project and I am experiencing some small issues with the AutoComplete component when trying to load a bigger list of contacts, some contacts may have the same name (because of test data), but different ids.

1. Warning when passing an object as a dataSource item. I get a duplicate key warning: "Warning: flattenChildren(...): Encountered two children with the same key"

    {
      contact,
      key: index,
      text: FullName,
      value: &ltMenuItem key={index} primaryText={item} /&gt
    }

2. When typing the rendering is slow, because sometimes it matches a lot of contacts. Ideally I would like to show maximum 5-10 contacts in the autocomplete, but that is not possible yet. (that feature seems to be accepted in a PR already, or?)

Thanks,

Answer 1

some times you have records in mui autocomplete that has the same display property, for example. in a list of users, 2 uers may have the same name. mui auto generates a key based on that property so you get duplicate keys.

the solution is to customize the key. and to do that you need to customize the rendering of the autocomplete list.

use renderOption property

       renderOption={(props, option, index) => {
              const key = `listItem-${index}-${option.id}`;
              return (
                <li {...props} key={key}>
                 
                  {option[optionProperty]}
                </li>
              );
            }}

Answer 2

Autocomplete now supports the getOptionKey param.