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

【问题标题】：MDC web components - Deactivating focus from textfield not workingMDC Web 组件 - 从文本字段停用焦点不起作用
【发布时间】：2020-05-24 18:08:04
【问题描述】：

我正在尝试通过使用 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。我在这里做错了什么以及从文本字段停用焦点的正确方法是什么？

【问题讨论】：

标签： mdc-components

【解决方案1】：

来自docs：

停用文本字段的焦点状态。通常调用输入blur事件。

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

您需要自己致电blur。比如这样：

document.activeElement.blur()

【讨论】：

但是，如果我在输入元素上这样做，我会得到 blur is not a function
这是因为输入“元素”是MDCTextField 而不是 DOM 元素。您应该使用input.root_ ... 但它是protected 或document.querySelector(".mdc-text-field").blur()。但由于只能有一个焦点元素document.activeElement - 绰绰有余。正如我所见，您已经用document.activeElement.blur() 更改了 codesandbox 并且它可以工作，如果我没有遗漏什么的话。