antd Выберите ход автозаполнения

Question

Я пытаюсь отключить автозаполнение в муравейнике Выберите, но ничего, что я пробую, не работает.Это, очевидно, проблематично, поскольку автозаполнение файлов chromes (только один из которых протестировано на данный момент) полностью покрывает параметры выбора (изображение ниже).

Я использую antd в React и пробовал выполнить следующие действия как для тега Select, так и для тега Form:

autoComplete="off" autoComplete="nope" autoComplete="business-state"

и, похоже, никто из них не отключает его.

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

https://codesandbox.io/s/wovnzpl9xw

Вот как это выглядит, когда пользователь печатает для поиска параметров

Вот как это должно выглядеть (это выглядит только в фокусе, но как только пользователь вводит хром, появляется автозаполнение)

Answer 1

Разобрался с решением моего вопроса, спасибо @trkaplan за то, что он указал мне правильное направление.Я предполагаю, что это не самое элегантное решение, так что, если у кого-то есть лучший способ реализовать это, я весь в ухеПо сути, мне пришлось создать onFocus метод для Select, который захватывает все элементы с классом ant-select-search__field, перебирает их и использует setAttribute, чтобы изменить атрибут autocomplete на произвольное значение, чтобы отключить его..

onFocus={() => {
  if (!this.state.autocompleteDisabled) {
    let i;
    const el = document.getElementsByClassName(
      "ant-select-search__field"
    );
    for (i = 0; i < el.length; i++) {
      el[i].setAttribute(
        "autocomplete",
        "registration-select"
      );
    }
    this.setState({ autocompleteDisabled: true });
  }
}}

Answer 2

Вы также можете использовать AutoComplete вместо Select, потому что при этом можно изменить базовый Input

<AutoComplete ... >
  <Input autoComplete='off' id='myId' />
</AutoComplete>

Автозаполнение является «новым» и предназначено для использования, если вывыборка данных для ввода вместо статичных данных, но по сути это просто копия Select и может использоваться таким же образом.

Answer 3

Вы должны установить filterOption на false

См. этот код песочница