web-dev-qa-db-ja.com

MDC Webコンポーネント-テキストフィールドからのフォーカスの非アクティブ化が機能しない

Mdc Webコンポーネントを使用してオートコンプリート入力を実装しようとしています。メニューが選択されたイベントリスナーがあり、テキストフィールドへのフォーカスを無効にしたい。 MDCTextFieldFoundationdeactivateFocusメソッドを使用してそれを試しました：

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であることもわかります。 codesandbox here 全体を見ることができます。ここで何が間違っているのですか？テキストフィールドからフォーカスを無効にする正しい方法は何ですか？

mdc-components
3
Leff

docs から：

テキストフィールドのフォーカス状態を無効にします。通常に応じて呼び出されます入力ぼかしイベント。

したがって、deactivateFocusはコンポーネントの状態を更新しますが、フォーカスは変更しません。

blurを自分で呼び出す必要があります。たとえば、次のようになります。

document.activeElement.blur()
1
x00