如何在不关闭模式的情况下关闭带有Escape的模态对话框中的本机选择元素？

Question

我使用带有role=dialog的泛型除数创建了一个普通HTML模型。我想关闭逃逸模式。

然而，模型本身也包含一个本机<select>元素，它的选项列表可以与Escape一起关闭。添加了封闭的代码后，在打开<select>元素时按Escape也会关闭模式。

如何只关闭逃逸上的<select>元素，并保持模态对话框打开？

window.onkeyup = (event) => {
  if (modal.style.display === "block") {
    if (event.code === "Escape") {
      modal.style.display = "none"
    }
  }
}

我创建了一个极小例子小提琴来演示这个问题。尝试打开“模式”，然后打开<select>元素(使用空格、Alt + Down、单击或点击，或者其他什么)，然后在<select>选项列表打开时按Escape键，查看我的问题是什么。

在Ubuntu上的Firefox106.0.5上观察到(Gnome，X11)。

Answer 1

作为部分解决办法，您可以添加一个stopPropagation调用到<select>元素中，以部分解决这个问题，如另一个极小示例小提琴所示。小提琴还在模态对话框容器中包含tabindex=0，以证明<select>元素不在焦点时，Escape处理程序正确工作。

这将导致<select>元素不再错误地关闭模式对话框，如果在选项列表打开时按下Escape；然而，即使选项列表未打开，模态对话框也不会在Escape上关闭。