Использовать автозаполнение пользовательского интерфейса в режиме freeSolo с формой реагирования

Question

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

Проблема:

Случай один: Автозаполнение работает и предлагает варианты, которые можно выбрать и отправить, но если для ввода задано пользовательское значение, оно не будет отправлено.

https://codesandbox.io/s/autocomplete-free-solo-case-1-i7kin?file= / demo. js

Случай два: выбранные опции из автозаполнения и пользовательские значения ввода представлены, НО выпадающий список автозаполнения больше не отображает предложения, а остается открытым все время, пока выбран вход

https://codesandbox.io/s/autocomplete-free-solo-case-2-uk9db?file= / демо. js

Я мог бы жить со вторым случаем, потому что у моих списков автозаполнения есть только несколько вариантов, но если у кого-то есть подсказка или решение, я действительно ценю это.

Answer 1

Вы используете freeSolo, но вы не добавили опцию autoSelect, поэтому проблема с вашим кодом заключается в том, что когда input теряет фокус - значение остается прежним. Причина здесь в том, что вы используете управляемый компонент, но контроллер имеет форму реагирования-хука.

Здесь вы можете выбрать один из двух вариантов:

1. Добавить autoSelect , поэтому даже когда пользователь теряет фокус на вводе, текущее значение будет значением автозаполнения.
2. Требует от пользователя нажатия enter, чтобы сохранить значение, которое он имеет в данный момент. (Вы можете использовать опцию clearOnBlur для этого).

Вот реализация первой опции:

<Autocomplete
  id="autocomplete"
  freeSolo
  autoSelect
  options={["option1", "option2", "another option"]}
  renderInput={params => (
    <TextField
      {...params}
      label="freeSolo"
      margin="normal"
      variant="outlined"
    />
  )}
/>

И рабочий пример (на основе ваших кодов и коробки) : https://codesandbox.io/s/autocomplete-freesolo-with-auto-value-on-blur-e2smn?file= / демо. js