MDC Web组件-从文本字段中停用焦点无效

Question

bounty到期在7天内。该问题的答案有资格获得+ 300声望赏金。Leff想要引起更多关注来回答这个问题。

我正在尝试通过使用mdc Web组件来实现自动完成输入。我有一个选择事件监听器的菜单，我想在其中禁用对文本字段的关注。我已经尝试通过使用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。您可以看到整个代码和框here。我在这里做错什么，以及从文本字段停用焦点的正确方法是什么？

Answer 1

来自docs：

禁用文本字段的焦点状态。通常响应于]调用输入blur事件。

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

您需要自行呼叫blur。例如这样：

document.activeElement.blur()