Reactjs 按tab键关闭从子菜单打开的“材质UI”对话框

我需要创建一个包含多个子菜单的菜单栏。当我从顶级菜单项打开一个对话框时，一切都按预期工作。但当我从子菜单打开对话框时，按tab键关闭对话框

我尝试了几种实现嵌套菜单的不同方法，并确定了此处讨论的方法：

我在这里创建了示例代码来演示问题： 您将看到这是从我在GitHub上找到的子菜单示例中派生出来的。我做了一些更改，因为我不确定如何从该示例中添加对话框的打开，所以我不确定我的操作方式是否正确。

问题是Tab触发父菜单的关闭，然后导致对话框卸载。当对话框打开时，可以使用状态来阻止父菜单关闭，但这会留下一个不同的问题。无论父菜单是否关闭，当出现选项卡时，它都会调用

event.preventDefault（）

，从而防止选项卡更改焦点位置（默认浏览器行为）

您可以通过使用

对话框

停止Tab键事件的传播来修复此问题。这会阻止

菜单

接收它，因此

菜单

不会尝试关闭自身，也不会调用

事件.preventDefault（）

。我不能保证这不会带来一些新问题，但这解决了所描述的问题

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

      <Dialog
        onKeyDown={stopPropagationForTab}

const stopPropagationForTab=（事件）=>{
如果（event.key==“Tab”）{
event.stopPropagation（）；
}
};
感谢您解释此行为和建议的修复。我将按照建议修改代码。。。