问React中Popover中的对话框

EN

我有一个肚脐，使用HeadlessUI的Popover在手机上的汉堡包菜单。默认情况下，当您单击不在其中的元素/焦点时，此菜单将关闭。

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

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

作为参考，这是react树的伪代码：

<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. 在树中将模式拉得更高，在popover/汉堡包菜单之外，但仍然在肚脐内。但这打破了关注点的分离，因为导航栏现在不得不担心模型的开放状态。
2. 将该模型放在树顶的某个位置，并使用某种全局状态(需要状态管理库)来处理该模型的打开。
3. 也许有办法防止Popover在专注于对话框时关闭？(但仍然允许它在聚焦任何不是对话框的内容时关闭)

我很想听听关于解决这个问题的任何想法。