Diálogo dentro de la ventana emergente en React HeadlessUI
Tengo una barra de navegación que utiliza el componente Popover de HeadlessUI en dispositivos móviles para el menú desplegable. Por defecto, este menú se cierra cuando se hace clic fuera de él o se enfoca en un elemento que no está dentro del menú.
Ahora estoy intentando agregar un modal (componente Dialog de HeadlessUI) que quiero que se abra al hacer clic en un botón que está dentro del menú desplegable. El modal se utiliza dentro de una definición de componente ModalButton (). Esto se hace para separar las preocupaciones (todo lo relacionado con el modal se encuentra dentro de ModalButton).
El problema es: cuando estoy en el menú desplegable de la barra de navegación y hago clic en el botón para abrir el diálogo, el navegador se enfoca en este nuevo diálogo y, por lo tanto, el menú desplegable pierde el enfoque y se cierra. Como se cerró, el botón (y por lo tanto el diálogo) ya no se renderizan y el diálogo desaparece instantáneamente.
A modo de referencia, este es un pseudocódigo del árbol de React:
<navbar>
<popover>
<modalbutton> {/* Componente "ModalButton" que contiene tanto el botón como el diálogo */}
<button></button> {/* Botón que abre el diálogo */}
<dialog></dialog> {/* Esto utiliza un portal internamente (con HeadlessUI) */}
</modalbutton>
</popover>
</navbar>
Se me ocurren algunas formas de resolver esto, pero ninguna es muy buena:
- Mover el modal más arriba en el árbol, fuera del menú desplegable pero aún dentro de la barra de navegación. Sin embargo, esto rompe la separación de preocupaciones, ya que ahora la barra de navegación debe preocuparse por el estado abierto del modal.
- Colocar el modal en algún lugar en la parte superior del árbol y utilizar algún tipo de estado global (requiere una biblioteca de administración de estado) para manejar la apertura del modal.
- Quizás haya alguna forma de evitar que el
Popoverse cierre al enfocar el diálogo (pero aún permitiendo que se cierre al enfocar cualquier cosa que no sea el diálogo).
Me encantaría escuchar cualquier idea para solucionar este problema.
davy.ai
Posibles soluciones para el problema del modal-dialogo
Como experto en TI especializado en javascript, reactjs, modal-dialogo, headless-ui, es posible sugerir múltiples formas de solucionar este problema. Sin embargo, cada solución tiene sus pros y sus contras. Aquí algunas de las posibles soluciones:
Solución 1: Usar los Hooks
useContextUtilizar los hooks
useContextpara manejar el estado del modal en lugar de utilizar props. Al aplicar esta solución, es posible compartir el estado entrePopoveryModalButton. De esta manera, sería posible controlar la apertura y cierre del diálogo sin preocuparse por el problema de enfoque del componente.Solución 2: Usar el componente
PortalEn lugar de utilizar el componente
ModalButtony definir tanto el botón como el diálogo dentro del popover, utilizar el componentePortalpara definir el modal fuera de la barra de navegación. Al definir el modal fuera de la barra de navegación, se puede evitar la necesidad de manejar el problema de cierre del popover.Solución 3: Utilizar el componente
PopperEn lugar de utilizar el componente
Popover, intentar utilizar el componentePopper. Al utilizarPopper, es posible controlar la interacción del popover con los elementos fuera de él, lo cual puede solucionar el problema de cierre del menú del popover al enfocar el diálogo.Solución 4: Utilizar otra biblioteca
Si ninguna de las soluciones anteriores funciona, se puede intentar utilizar otra biblioteca que maneje mejor el problema de la interacción entre el modal y el popover. Algunas de estas bibliotecas incluyen
react-overlaysyreact-modal.En conclusión, cada solución tiene sus propias fortalezas y debilidades. Al probar cada solución, es posible solucionar el problema del diálogo modal desapareciendo debido al cierre del popover al enfocar el diálogo.