Диалог в Popover в React HeadlessUI

Question

У меня есть панель навигации, которая использует HeadlessUI на мобильном телефоне для гамбургер-меню. По умолчанию это меню закрывается, когда вы щелкаете / фокусируетесь на элементе, которого нет в нем.

Сейчас пытаюсь добавить модальный (HeadlessUI ), который я хочу открыть при нажатии кнопки во всплывающем меню. Модальное окно используется в определении компонента ( ). Это сделано для разделения проблем (все, что относится к модальному, находится внутри ).

Проблема в следующем: когда я нахожусь в всплывающем меню навигационной панели и нажимаю кнопку, чтобы открыть диалоговое окно. Браузер фокусируется на этом новом диалоговом окне, поэтому всплывающее окно теряет фокус, закрывая его. После закрытия кнопка (и, следовательно, родственный элемент диалогового окна) больше не отображается, поэтому диалоговое окно исчезает мгновенно.

Для справки, это псевдокод дерева реакции:

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

Я могу придумать несколько способов решить эту проблему, но ни один из них не очень хорош:

1. Вытяните модальное окно выше в дереве, за пределы всплывающего / гамбургерного меню, но все еще внутри навигационной панели. Но это нарушает разделение задач, поскольку теперь навигационная панель должна беспокоиться об открытом состоянии модального окна.
2. Поместите модальное окно где-нибудь наверху дерева и используйте какое-то глобальное состояние (требуется библиотека управления состоянием) для обработки открытия модального окна.
3. Может быть, есть способ предотвратить от закрытия при фокусировке на диалоге? (но все же позвольте ему закрываться при фокусировке всего, что не является диалогом)

Я хотел бы услышать какие-либо идеи по устранению этой проблемы.

Answer 1

Вы должны поместить диалог выше в дереве. Обычно они могут располагаться на уровне страницы или даже на уровне приложения, в зависимости от того, насколько глобальны эти диалоги.

Затем вы можете использовать свой любимый менеджер глобальных состояний или useContexthook, чтобы эти диалоги открывались программно из любого места вашего приложения.

В этом случае автоматическое закрытие всплывающего окна больше не должно быть проблемой.