我需要创建一个包含许多具有子菜单的菜单的菜单栏。当我从顶级菜单项打开对话框时，一切都按预期/预期工作。但是当我从子菜单打开一个对话框时，按 Tab 键会关闭对话框。
我尝试了几种不同的方法来实现嵌套菜单，并最终选择了这里讨论的方法：https://github.com/mui-org/material-ui/issues/11723
我创建了示例代码来演示这里的问题： https://codesandbox.io/s/loving-heisenberg-rvwwb 你会看到这是从我在 GitHub 上找到的子菜单示例中派生出来的。我更改了一些内容，因为我不确定如何从该示例中添加对话框的开头，所以我不确定我这样做的方式是否正确。
【问题讨论】：
标签： reactjs material-ui
问题是 Tab 触发关闭父菜单，然后导致对话框被卸载。您可以使用状态来防止父菜单在对话框打开时关闭，但这会留下不同的问题。无论父菜单是否关闭，当 Tab 出现时，它都会调用 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，只是因为我想确保问题与已更改的方面无关。这抛弃了一些样式，但解决的主要行为似乎在两个版本中都一样。
处理此问题的另一种方法是重新编写代码，使对话框不再是菜单的子项。然后单击打开对话框的菜单项将在顶层设置状态以关闭所有菜单并打开对话框。这可能是更好的处理方式，但对代码结构的改变更大。
【讨论】：