Nesting of dialogs is sometimes broken

[piotrjoniec]

What package within Headless UI are you using?

For example: @headlessui/vue

What version of that package are you using?

For example: 0.0.0-insiders.834dbf4 (Similar problems also occur on 1.7.19)

What browser are you using?

For example: Chrome

Reproduction URL

https://codesandbox.io/p/devbox/practical-fermi-l65msz

Describe your issue

Nesting of dialogs doesn't work if the dialog components aren't nested in the DOM.

So this is fine:

<Dialog>
  <Dialog></Dialog>
</Dialog>

But this breaks:

<Dialog></Dialog>
<Dialog></Dialog>

Example of what happens in the reproduction:

1. Click on "Open Modal"
2. Click on "Open Modal Two"
3. There are no focusable elements inside the <FocusTrap /> - warning in the console
4. Clicking on the nested modal hides the first modal.

[RobinMalfait]

Hey!

This is currently expected, we only support nested dialogs if they are nested in the React / Vue tree as well. This allows us to keep track of the depth of the dialogs and that way we know which one is on top and which one is behind.

We want to improve this behaviour in the future, but we don't have an ETA for this yet.

For now, you should use nested <Dialog /> components if you want nested dialogs.