React HeadlessUI 中 Popover 中的对话框

Question

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

现在我正在尝试添加一个模式 (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>

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

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

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

Answer 1

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

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

在这种情况下，弹出窗口自动关闭应该不再是问题。

React HeadlessUI 中 Popover 中的对话框

Dialog within Popover in React HeadlessUI

javascript

modal-dialog

reactjs

headless-ui