Material UI 自動完成顯示錯誤的搜索值（建議選項中有一些額外的無效結果）

Question

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Stack from '@mui/material/Stack';

const demoList = [
  { label: 'Maggie Li', value: 'Maggie.li@gmail.com' },
  {
    label: 'Rajadurai sidharta vaasan Achamthavirthan',
    value: 'Rajadurai.sidharta.vaasan.Achamthavirthan@gmail.com',
  },
  { label: 'Sumit Kumar', value: 'sk1@gmail.com' },
  { label: 'Sumit Kumar', value: 'sk2@gmail.com' },
  { label: 'Sumit Kumar', value: 'sk3@gmail.com' },
  { label: 'Indranil Basu', value: 'ib@gmail.com' },
]

export default function Playground() {
  const defaultProps = {
    options: demoList,
    getOptionLabel: (option) => option.label,
  };

  return (
    <Stack spacing={1} sx={{ width: 300 }}>
      <Autocomplete
        {...defaultProps}
        id="disable-close-on-select"
        disableCloseOnSelect
        renderInput={(params) => (
          <TextField {...params} label="disableCloseOnSelect" variant="standard" />
        )}
      />
    </Stack>
  );
}

當我尋找 , 它在下拉選項中顯示不相關的結果。

任何見解/線索？

我希望只顯示與鍵入的文本匹配的選項。

Answer 1

發現問題 - 看起來如果鍵在選項列表中不是唯一的，那么控制台會拋出此警告。 搜索也會出現亂碼。 如果名稱（鍵）是唯一的，那么這種錯誤搜索的問題就不會發生。

進一步閱讀： https://lockstep.io/blog/debugging-lesson-well-learned-fixing-material-ui-autocomplete-search/