Estoy tratando de construir un caso de uso funky:

Tengo un cuadro de diálogo HeadlessUI, dentro de este cuadro de diálogo, hay un componente de menú HeadlessUI como un elemento secundario anidado, quiero activar el menú a través de un atajo de teclado

Me las arreglé para activar el diálogo, a través de:

 // I took the useWindowEvent from the headlessUI code useWindowEvent("keydown", (event) => { if (event.key === "p") { event.preventDefault() event.stopPropagation() selectorRef.current?.click() } })

y en mi componente Menú:

 // My react component forwardRefs to the trigger button export const ProjectSelector = forwardRef( ... some other component code <Menu.Button ref={ref} as="div"> ... other code

Esto funciona bien para activar el Menú, pero el menú también tiene una barra de búsqueda, por lo que cada vez que presiono la tecla p, el oyente activa de nuevo y cierra el Menú mediante programación.

Eché un vistazo dentro del código headlessUI tratando de entender el código de trampa de enfoque, pero está por encima de mi cabeza, ¿hay alguna forma de detectar si el diálogo principal tiene foco? de esa manera puedo ignorar la pulsación de tecla si el foco está en el menú :)

Solución alterna:

Mientras escribía la pregunta me topé con una solución... no es muy bonita, así que tal vez alguien pueda encontrar una mejor solución:

 // I'm pretty sure I'm doing everything wrong in here // but I couldn't find another way to remotely trigger and keep focus on the menu component useWindowEvent("keydown", (event) => { if ( event.key === "p" && document.activeElement?.getAttribute("role") !== "menu" && document.activeElement?.tagName !== "INPUT" ) { event.preventDefault() event.stopPropagation() selectorRef.current?.click() } })