Пользовательский интерфейс материала Автозаполнение очистить значение при выборе

Question

Я пытаюсь очистить значение, выбранное во входном файле, сразу после сделанного выбора. Он очищается при размытии, но не при выборе.

<Autocomplete
  disabled={showTextField}
  className="center-vertically"
  options={listOfDependencies.sort()}
  style={{ width: 500 }}
  onChange={addDependency}
  value={value}
  onKeyPress={(event: React.KeyboardEvent) => {
    if (event.key == "Enter") {
      event.preventDefault();
      addDependency;
    }
  }}
  renderInput={params => (
    <TextField
      {...params}
      value={value}
      label="Select dependency"
      variant="outlined"
      defaultValue={[listOfDependencies[0]]}
      fullWidth
    />
  )}
/>

Answer 1

Напишите фильтр на данные options, все будет в порядке

const [select, setSelect] = React.useState(null);
const addDependency = (e, value) => {
  setSelect(value)
}

options={listOfDependencies.filter(x => !select || select.title !== x.title)}

Полный код можно найти в онлайн-демонстрации:

https://stackblitz.com/edit/mppyj9?file=demo.js