MDC Web 组件 - 从文本字段停用焦点不起作用

Question

我正在尝试使用 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，此时文本字段仍处于焦点状态。你可以看到整个codesandbox here。我在这里做错了什么以及从文本字段停用焦点的正确方法是什么？

Answer 1

来自docs：

Deactivates the focus state of the Text Field. Normally called in response to the input blur event.

因此deactivateFocus更新组件的状态，但不会改变焦点。

你需要自己打电话给blur。例如像这样：

document.activeElement.blur()

MDC Web 组件 - 从文本字段停用焦点不起作用

MDC web components - Deactivating focus from textfield not working

mdc-components