[Autocomplete] Filter error with two equal names in the list

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

dulicate ‘title’ will cause filter error

Expected behavior 🤔

should be shown the correct answer

Steps to reproduce 🕹

Steps:

1. goto https://mui.com/components/autocomplete/
2. Find the “Free Solo Dialog”
3. Copy the Code
4. Direct place in and run
5. add 1 or more same title in the “top100Films” list, ie.{ title: ‘The Shawshank Redemption’, year: 1994 },{ title: ‘The Shawshank Redemption’, year: 1994 },{ title: ‘The Shawshank Redemption’, year: 1994 },
6. Try key in “shaaaaa”,
7. those filter items will still remain

Context 🔦

nothing special, just wasted few hours to find out what is the problems, the the end found the original code already got error. ya. maybe can implement self filter code, but this is not the reason i choose to use MUI.

hope your guy got time help fix, thanks appreciate all of you. have a good day.

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
ANS : Chrome

output = 
  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE        
    Yarn: Not Found
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 99.0.4844.74
    Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.46)
  npmPackages:
    @emotion/react: ^11.7.1 => 11.8.1 
    @emotion/styled: ^11.6.0 => 11.8.1 
    @mui/base:  5.0.0-alpha.70 
    @mui/icons-material: ^5.2.1 => 5.4.4 
    @mui/lab: ^5.0.0-alpha.60 => 5.0.0-alpha.71 
    @mui/material: ^5.2.3 => 5.4.4 
    @mui/private-theming:  5.4.4 
    @mui/styled-engine:  5.4.4 
    @mui/system:  5.4.4 
    @mui/types:  7.1.2 
    @mui/utils:  5.4.4 
    @types/react:  17.0.39 
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript:  4.6.2

[Franklin0702]

@shawnlwy85

A colleague from my job found that if you set the key property for each option with an UUID this solved the issue,

Something like:

import { v4 as uuidv4 } from "uuid"
renderOption={(props, option: { label: string }) => (
        <li {...props} key={uuidv4()}>
          {option.label}
        </li>
      )}

We should consider adding this to the library in the default option render.

[shawnlwy85]

@shawnlwy85 I noticed you reported this issue just for free solo dialog, but this happens in all the scenarios

As you can see in the first example posted on the docs page if you add duplicate entries and try to filter you will see the same behavior, here is an example in Stackblitz based on the more simple example in the docs: https://react-jmpfvz.stackblitz.io

Also if you start typing you can notice the issue quickly (no filter is applied) but if you type something that doesn’t match any title and then you replace it with something that does it you will notice that the filter is now working.

Also if you start typing and then iterate between removing the last whitespace and adding it again it will add duplicates results. (This I replicate that at the end of the below video, please watch it till the end).

Here is a clip where you can see those cases: https://drive.google.com/file/d/1AI_IvbR2l9cAgsZjq3OyMOLSNb6SOT5l/view?usp=sharing Please watch it till the end

Also here is the link to the sample code: https://stackblitz.com/edit/react-jmpfvz?file=demo.tsx And the app running: https://react-jmpfvz.stackblitz.io

Hope this can add more light to the issue.

thanks for the details explanation