multiple Dialog doesn't allow interact with elements

[ElYaiko]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.7.22

What browser are you using?

Chrome, Safari, or N/A

Reproduction URL

https://stackblitz.com/edit/nuxt-ui-5movd8?file=app.vue
(Test on mobile or open Devtools and toggle device mode.)
Component source

Describe your issue

When two or more Dialog are active doesn't allow to interact with the elements of the dialog on top when in touch mode (mobile).

[stephanebachelier]

I have the same issue with @headlessui/react 2.0.4.
When I open a dialog everything work correctly but if I opened a second dialog, as soon as I click inside the opened dialog or any interactive component the second dialog close.

[RobinMalfait]

Hey!

For the Vue version, we only support a single open Dialog at the time. If you want to open nested Dialogs then you have to nest them in the Vue tree.

If they are siblings, then you can only open one at a time. This means that if you have a transition on the Dialog, that you have to wait for the transition to finish before opening the next one.

This is currently not a bug, but a missing feature of @headlessui/vue.

[ElYaiko]

Hey!

For the Vue version, we only support a single open Dialog at the time. If you want to open nested Dialogs then you have to nest them in the Vue tree.

If they are siblings, then you can only open one at a time. This means that if you have a transition on the Dialog, that you have to wait for the transition to finish before opening the next one.

This is currently not a bug, but a missing feature of @headlessui/vue.

Sometimes is necessary to open an external dialog on top from an opened dialog outside from it's tree.

Having to close and wait to open another small dialog I think is very tedious for both DX and UX.

Would be good to have this feature in the Vue version as the React version already support this.

[ElYaiko]

Any update please?
@tailwindlabs
@RobinMalfait

[mikehoh]

@RobinMalfait
I'm trying to use nested modals and I faced with the problem. I couldn't find if this is a known issue or maybe not an issue :)
When I open a modal, inside this modal I have another modal, like confirmation of something. And it's possible to open it and interact.
After closing of the second modal, the first modal (which is still opened), loses it's close events. So, it's impossible to close it by clicking outside or by pressing Esc. But possible by calling close manually.
Could you please point me how to solve this, if it's a known issue.
Thanks!