Javascript MDC菜单-焦点在输入时保持菜单打开

我正在使用MDCWeb组件构建一个自动完成输入。我有一个输入文本字段和一个菜单。你可以看到代码Sandox。 我在focusin事件中显示菜单，但如果我开始在输入字段中写入，菜单将立即关闭

const input = new MDCTextField(document.querySelector(".mdc-text-field"));
const menu = new MDCMenu(document.querySelector(".mdc-menu"));

input.listen("focusin", () => (menu.open = true));

---

我假设这是因为触发菜单外的单击时，菜单默认行为会关闭。这里的问题还在于焦点是由textfield中的第一个菜单项获取的。有什么办法可以防止这种情况发生，让菜单打开直到焦点在输入字段上消失？

这里的问题与可访问性有关，这是按顺序发生的：

当您点击输入时，输入将获得客户机“焦点”

这将触发打开菜单的“聚焦”事件

然后，根据，MDCMenu将自动聚焦第一个菜单项

为了阻止这种聚焦自动发生，我们可以设置

menu.setDefaultFocusState（DefaultFocusState.NONE）；

DefaultFocusState.NONE

不会改变焦点。如果您不希望菜单在打开时抓取焦点，请设置此选项。（例如，自动完成下拉菜单）

如果这么简单，那就太好了，但是现在的问题是如果

MDCMenu

没有焦点时自动关闭

[编辑]：下一节不正确，锚定不会打开，或者只在元素周围锚定它

为了解决下一个问题，我们将

MDCMenu

锚定到输入元素（必须是本机元素）：

menu.setAnchoreElement（document.querySelector（“.mdc文本字段”）；

最后，我们需要告诉

MDCMenu

在焦点从输入中取出后关闭：

input.listen（“focusout”，（）=>{
menu.open=false；
});

可能还有一些其他问题，你可以调整，但我认为这应该让你接近。这里有一个共享的代码示例，它还使用MDCMenu创建了一个“自动完成下拉菜单”，您可以在此处引用该菜单：

以下是您可以在codesandbox中使用的代码和我的更改：

从“@material/textfield”导入{MDCTextField}；
从“@material/menu”导入{MDCMenu，DefaultFocusState，Corner}；
导入“/styles.scss”；
const input=new MDCTextField（document.querySelector（“.mdc文本字段”）；
const menu=新的MDCMenu（document.querySelector（“.mdc menu”）；
menu.setDefaultFocusState（DefaultFocusState.NONE）；
菜单。设置锚定角（角点。底部_开始）；
menu.setAnchoreElement（input.component）；
输入。听（“聚焦”，（）=>{
menu.open=true；
});
输入。听（“单击”，（）=>{
menu.open=true；
});
输入。听（“focusout”，（）=>{
menu.open=false；
});