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

标签 mdc-components

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

最佳答案

来自 docs :

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

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

你需要自己调用blur。例如像这样:

document.activeElement.blur()

关于mdc-components - MDC Web 组件 - 从文本字段停用焦点不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61990229/

相关文章:

javascript - 重用 blaze 模板,如何访问其他模板的辅助函数?

android - 我如何更改 BadgeDrawable Android 中的背景颜色

javascript - 如何使用 unpkg 作为 MDC CSS 文件和 s 文件的存储在 Web 应用程序上添加 Material Design 选项卡

javascript - MDCSnackbarFoundation 类使用

ios - 添加到 Xcode Interface Builder 的 Materials Components MDCTextField 不接受用户输入

javascript - 单击第一个菜单项后防止 MDC 菜单关闭

javascript - MDC 菜单 - 当焦点在输入上时保持菜单打开

css - 如何更改 mdc-select 下拉箭头的颜色?

html - MDC : How to center a cell?