React HeadlessUI 中的 Popover 中的对话框

Question

我有一个导航栏，它在移动设备上使用 HeadlessUI 的 Popover 来显示汉堡菜单。默认情况下，当您点击/聚焦不在其中的元素时，此菜单会关闭。

现在我正在尝试添加一个模式 (HeadlessUI Dialog)，当单击弹出菜单中的按钮时，我想打开它。模态在 ModalButton 组件定义 (<><button><dialog></>) 中使用。这样做是为了分离关注点（与模式相关的所有内容都在 ModalButton 内）。

问题是：当我在导航栏的弹出菜单中并单击按钮以打开对话框时。浏览器关注这个新对话框，因此弹出框失去焦点，使其关闭。由于它关闭，按钮（以及对话框兄弟）不再呈现，因此对话框立即消失。

作为参考，这是一个反应树的伪代码：

<navbar>
  <popover>
    <>            {/* "ModalButton" containing both the button and the dialog */}
      <button />  {/* Button that opens the dialog */}
      <dialog />  {/* This uses a portal internally (with HeadlessUI) */}
    </>
  </popover>
</navbar>

我可以想出几种方法来解决这个问题，但都不是很好：

1. 将模式拉到树中更高的位置，在弹出框/汉堡菜单之外，但仍在导航栏内。但这打破了关注点分离，因为导航栏现在必须担心模式的打开状态。
2. 将模态框放在树的顶部某处，并使用某种全局状态（需要状态管理库）来处理模态框的打开。
3. 也许有一种方法可以防止Popover 在关注对话框时关闭？ （但在聚焦不是对话框的任何内容时仍然允许它关闭）

我很想听听有关解决此问题的任何想法。

Answer 1

您应该将对话框放在树的更高位置。通常这些可以在页面级别，甚至是应用级别，具体取决于这些对话框的全局性。

然后，您可以使用您最喜欢的全局状态管理器或 useContext 挂钩来告诉这些对话框以编程方式从您应用中的任何位置打开。

在这种情况下，弹出框自动关闭不再是问题。