Веб-компоненты MDC - деактивация фокуса из текстового поля не работает

Я пытаюсь реализовать ввод автозаполнения с помощью веб-компонентов mdc. У меня есть выбранный в меню прослушиватель событий, где я хочу отключить фокус на текстовом поле. Я пробовал это с помощью метода MDCTextFieldFoundation deactivateFocus:

const inputFoundation = new MDCTextFieldFoundation(
  document.querySelector(".mdc-text-field")
);
menu.listen("MDCMenu:selected", e => {
  console.log(inputFoundation);
  input.value = e.detail.item.dataset.value;
  inputFoundation.deactivateFocus();
});

Но это не работает. В консоли я также вижу, что свойство ввода isFocused имеет значение false, когда текстовое поле все еще сфокусировано. Вы можете увидеть все коды и вставку здесь. Что я здесь делаю неправильно и как правильно отключить фокус из текстового поля?


mdc-components
person Leff    schedule 24.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Из документов:

Деактивирует состояние фокуса текстового поля. Обычно вызывается в ответ на событие input blur.

Итак, deactivateFocus обновляет состояние компонента, но не меняет фокус.

Вам нужно позвонить blur самостоятельно. Например вот так:

document.activeElement.blur()
person x00    schedule 04.06.2020
comment
но если я сделаю это для элемента ввода, я получу размытие, это не функция - person Leff; 04.06.2020
comment
Это потому, что входным элементом является MDCTextField, а не элемент DOM. Вы должны использовать либо input.root_ ... но это protected, либо document.querySelector(".mdc-text-field").blur(). Но так как сфокусированный элемент может быть только один document.activeElement - более чем достаточно. И как я вижу, вы уже изменили codesandbox на document.activeElement.blur(), и это работает, если я ничего не пропущу. - person x00; 05.06.2020