按 T​​ab 键关闭从子菜单打开的 Material UI 对话框

Question

我需要创建一个菜单栏，其中包含许多具有子菜单的菜单。当我从顶级菜单项打开对话框时，一切都按预期/预期工作。但是当我从子菜单打开一个对话框时，按 Tab 键会关闭该对话框。

我尝试了几种不同的实现嵌套菜单的方法，并确定了此处讨论的方法：https : //github.com/mui-org/material-ui/issues/11723

我已经创建了示例代码来演示这里的问题：https : //codesandbox.io/s/loving-heisenberg-rvwwb 你会看到这是从我在 GitHub 上找到的子菜单示例中分叉出来的。我更改了一些内容，因为我不确定如何从该示例中添加对话框的打开方式，因此我不确定我这样做的方式是否正确。

Answer 1

问题是Tab触发了父菜单的关闭，然后导致对话框被卸载。您可以使用 state 来防止父菜单在 Dialog 打开时关闭，但这会留下一个不同的问题。无论父 Menu 是否关闭，当 aTab发生时，它会调用event.preventDefault()它然后阻止Tab更改焦点位置（默认浏览器行为）。

您可以通过Dialog停止传播Tab关键事件来解决此问题。这会阻止Menu接收它，因此Menu不会尝试关闭自身，也不会调用event.preventDefault(). 我不能保证这不会引入一些新问题，但这解决了所描述的问题。

const stopPropagationForTab = (event) => {
  if (event.key === "Tab") {
    event.stopPropagation();
  }
};

      <Dialog
        onKeyDown={stopPropagationForTab}

在我的沙箱分支中，我将 Material-UI 版本从 1.2 升级到 4.0，只是因为我想确保问题与已更改的方面无关。这抛弃了一些样式，但正在解决的主要行为在两个版本中似乎都一样。

处理此问题的另一种方法是重新编写代码，使 Dialog 不再是 Menu 的子项。然后单击打开对话框的菜单项将在顶层设置状态以关闭所有菜单并打开对话框。这可能是处理此问题的更好方法，但它对代码结构进行了更大的更改。