按Tab键关闭从子菜单中打开的“材质UI”对话框。

Question

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

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

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

Answer 1

问题在于 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，只是因为我想确保问题与已更改的方面无关。这消除了一些样式，但是要解决的主要行为似乎在两个版本中都相同。

---

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