MDC 菜单 - select 事件监听器随机工作

Question

我有一个 MDC 菜单组件，我想在其中为列表项设置单击或 select 事件侦听器。 我尝试过各种事件，例如“click”、“select”、“selectionchange”、“selectstart”，但都没有奏效。 在文档中它说MDCMenu:selected

用于指示何时选择了元素。 此事件还包括所选项目和该项目的列表索引。

我也尝试过听该事件，但没有任何效果：

menu.listen("MDCMenu:selected", e => console.log(e));

您可以在 此处查看沙盒。 应该如何为 MDC 菜单组件设置事件监听器？

更新

因为在我在评论中被告知对于其他用户来说代码实际上是有效的。 我自己用其他浏览器进行了测试，在 safari 和 firefox 中它在我的 mac 机器上运行良好，但在 Chrome 中我仍然有问题。 我有 chrome 版本 83.0.4103.61。 我已经根据评论中的建议更新了代码框，但我现在可以看到，如果按几次 select 选项，它会突然在所有浏览器中开始非常随机地工作。

Answer 1

似乎不一致是由于竞争条件造成的。 单击菜单会使焦点离开导致菜单关闭的输入。 菜单关闭会导致焦点移回输入，使其再次打开。

问题是菜单经常在菜单有机会发送所选事件之前关闭。

您需要防止菜单在focusout时关闭，或者在关闭菜单之前设置一个大的超时时间。

input.listen("focusout", () => {
  setTimeout(() => {
    menu.open = false;
    // The timer might need to be fiddled with. Needs to not be too big or too small.
  }, 120);
});

https://codesandbox.io/s/new-brook-o7k1j?file=/src/index.js

---

这是另一个没有 setTimeout 时间问题的选项。 它使用 0 的超时来模拟setInterval ，以便重新排序事件的时间，而不是将它们推到事件队列的末尾。 这应该更安全，更不容易出现以前的竞争条件问题。

let menuFocused = false;
input.listen("focusin", () => {
  if (!menuFocused) menu.open = true;
});
input.listen("click", () => {
  menu.open = true;
});

menu.listen("focusin", () => {
  menuFocused = true;
});
menu.listen("focusout", () => {
  // This interval is to help make sure that input.focusIn doesn't re-open the menu
  setTimeout(() => {
    menuFocused = false;
  }, 0);
});
input.listen("focusout", () => {
  setTimeout(() => {
    if (!menuFocused) menu.open = false;
  }, 0);
});

https://codesandbox.io/s/proud-hooks-c9qi5?file=/src/index.js