¡He estado usando @headlessui/react para un proyecto y me ha ayudado a ser muy productivo! Pero encontré un problema en el que un componente interfiere con otro. Creo que he encontrado el área general del problema y puedo proporcionar una reproducción, pero quiero saber:
Cuando se utiliza el componente Popover dentro de un componente Tab.Panel , el Popover.Panel no se comporta correctamente. Según los documentos :
Cuando el panel está abierto, al hacer clic en cualquier lugar fuera de su contenido, al presionar la tecla Escape o al alejarse de él, se cerrará la ventana emergente.
Sin embargo, cuando el Popover está dentro de un componente de Tab ( docs ), el comportamiento es inconsistente. Para mí, en Chrome, los clics dentro de Popover.Panel cierran el panel a menos que el clic sea en un button y en Safari el panel se cierra en todos los casos. Sin embargo, enfocar el botón con el teclado permite la selección.
Creé una versión simplificada del problema en codesandbox
Creo que esto tiene algo que ver con el componente Tab que captura el focus del Popover.Panel que a su vez cierra el Popover.Panel .
Agregué este fragmento de "Consola registrando el elemento enfocado a medida que cambia" a la reproducción y el Tab.Panel parece tener el focus después de hacer clic en Popover.Panel :
document.addEventListener( "focusin", function () { console.log("focused: ", document.activeElement); }, true );¿Alguien puede proporcionar una explicación de lo que está sucediendo y sugerencias para remedios simples?
Ahora puedo responder por qué sucede esto específicamente y también proporcionar una posible solución.
Pude simplificar un poco mi caso. Esto sucederá siempre que Popover esté dentro de un elemento enfocable (que es Tab.Panel ). Creo que es aquí en PopoverRoot que cada vez que el elemento activo está fuera del grupo, el panel se cierra.
Si el Popover está dentro de un elemento con tabindex="0" , entonces ese elemento será el elemento activeElement y el panel se cerrará. Actualicé la reproducción de codesandbox para demostrar esto sin usar Tab y también propuse una solución, pero no estoy seguro de si es una solución adecuada o no.
La solución parece ser simplemente agregar tabIndex="0" a Popover.Panel para que sea el activeElement . ¿Hay alguna razón por la que esto no deba hacerse o podría causar otro comportamiento inesperado?