Tengo una barra de navegación que usa Popover de HeadlessUI en dispositivos móviles para el menú de hamburguesas. De forma predeterminada, este menú se cierra cuando hace clic fuera/se enfoca en un elemento que no está en él.

Ahora estoy tratando de agregar un modal (HeadlessUI Dialog ) que quiero abrir al hacer clic en un botón que está en el menú emergente. El modal se usa dentro de una definición de componente ModalButton ( <><button><dialog></> ). Esto se hace por separación de preocupaciones (todo lo relacionado con el modal está dentro de ModalButton ).

El problema es: cuando estoy en el menú emergente de la barra de navegación y hago clic en el botón para abrir el cuadro de diálogo. El navegador se centra en este nuevo cuadro de diálogo, por lo que la ventana emergente pierde el foco y se cierra. Desde que se cerró, el botón (y, por lo tanto, el hermano del diálogo) ya no se representan, por lo que el diálogo desaparece instantáneamente.

Como referencia, este es un pseudocódigo del árbol de reacción:

 <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>

Puedo pensar en algunas formas de resolver esto, pero ninguna es muy buena:

1. Tire del modal hacia arriba en el árbol, fuera del menú emergente/hamburguesa pero aún dentro de la barra de navegación. Pero eso rompe la separación de preocupaciones ya que la barra de navegación ahora tiene que preocuparse por el estado abierto del modal.
2. Coloque el modal en algún lugar en la parte superior del árbol y use algún tipo de estado global (requiere una biblioteca de administración de estado) para manejar la apertura del modal.
3. ¿Tal vez hay una manera de evitar que Popover se cierre cuando se enfoca en el diálogo? (pero aún permita que se cierre al enfocar cualquier cosa que no sea el diálogo)

Me encantaría escuchar alguna idea para solucionar este problema.