HeadlessUI React, как определить элемент с фокусом в данный момент?

Question

Я пытаюсь создать забавный вариант использования:

У меня есть диалог HeadlessUI, внутри этого диалога есть компонент HeadlessUI Menu в качестве вложенного дочернего элемента, я хочу вызвать меню с помощью сочетания клавиш

Мне удалось вызвать диалог с помощью:

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

и в моем компоненте меню:

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

Это отлично работает для запуска меню, но в меню также есть строка поиска, поэтому всякий раз, когда я нажимаю клавишу p, слушатель запускается снова и программно закрывает меню

Я заглянул внутрь кода headlessUI, пытаясь понять код ловушки фокуса, но он у меня над головой, есть ли способ определить, имеет ли родительский диалог фокус? таким образом я могу просто игнорировать нажатие клавиши, если фокус находится в меню :)

Обходной путь:

При написании вопроса я наткнулся на обходной путь ... он не очень красивый, так что, возможно, кто-то может придумать лучшее решение:

        // 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()
    }
  })