headlessui / When two modals are opened as brothers(not nested child)

[AmirZNBZ]

What package within Headless UI are you using?
package: headlessui/react

What version of that package are you using?
version : v1.7.16,

What browser are you using?
Browser : Chrome, Safari , ...

First of all, thanks for this library!. that's so help full

• With React and Tailwind CSS: https://codesandbox.io/s/github/tailwindlabs/reproduction-headlessui-react

Describe your issue
Multiple/nested Dialog instances bugs #426 I read this issue, but it is not the same as the problem I have.
When two modals are opened as brothers, if we close the second one, the first one behind it will be closed automatically.
These two modals are not nested.
This is how a modal opens. I have a modal to install the application, which is displayed in a time frame. Now if I open another modal and I am doing something and this modal opens, if I close this modal, it is behind it. It also closes.
And there is also a picture below for clearer understanding :

[adamwathan]

Hey! In order to open multiple dialogs at once, Headless UI requires them to be nested so that it's clear what the hierarchy is and which one should close first when hitting escape for instance.

Your example is tricky though because with that content I don't think nesting them really makes sense — one is sort of like an event-driven ad that pops up and might not be related to the dialog behind it.

Will leave this open for now just so others on the team have a chance to see it in case they have a suggestion for how to structure this.

[bigint]

IMO We might need nested modals in some cases when we have global modals like auth etc 🙇🏼

Screen.Recording.2024-01-01.at.11.22.49.PM.mov

[DenghuaCN]

Why is it set like this?

[JoniRinta-Kahila]

I had a similar problem where I had two sibling dialogs open. Closing the upper dialog also closed the lower one. In my case, the problem was fixed by changing the way the lower dialog is closed.

<Dialog as="div" className="relative z-40" onClose={() => {}} onClick={() => setOpen(false)}>

[IlyaFriend]

For Vue, I had 2 sibling dialogs, and adding v-if to them solved the problem.
This way they're removed from the DOM when closed, but we don't see them closed anyways. Thus, there is only 1 rendered dialog at a time.

<Dialog v-if="isFirstOpen" :open="isFirstOpen" />
<Dialog v-if="isSecondOpen" :open="isSecondOpen" />

[aronduby]

I am caught in a similar situation but with Vue and upgrading from 1.7.13 to 1.7.19. I have this setup for some custom prompts (like js prompts where it opens a dialog with different types of input) and some heavy weight item pickers used all throughout the app which shares a single instance.

[RobinMalfait]

This should be fixed by #3242, and will be available in the next release. This PR essentially allows you to render <Dialog /> components as siblings and the last one that is opened will be considered the top-most <Dialog />.

You can already try it using:

• npm install @headlessui/react@insiders.

[aronduby]

@RobinMalfait can you confirm this was fixed with the vue version as well and follows the same @insiders tag?

[RobinMalfait]

@aronduby this is currently only a new feature for React, the infrastructure is a bit different for Vue so will require a bit more work to get it implemented there as well.

[aronduby]

@RobinMalfait thanks, is there a separate ticket I should follow for the vue version?

[dmarvasti]

@RobinMalfait It's working well and very much appreciate your effort! Thank you.

[WoodyDark]

Is there an issue/discussion that we can follow for Vue implementation of this feature?

[sebastiandotdev]

@WoodyDark Any solution for this?

[ElYaiko]

Is there any solution for vue?

[cqueiroz-ciandt]

Maybe a question to ask is: Is there a way to fix it without upgrading to the new version? Sometimes it is complicated to upgrade some libraries in a large project, especially when it comes with breaking changes.

[dmarvasti]

Maybe a question to ask is: Is there a way to fix it without upgrading to the new version? Sometimes it is complicated to upgrade some libraries in a large project, especially when it comes with breaking changes.

My recommendation would be to upgrade your library, which is where the fix resides. I didn't experience much pain and it's a large project. If you avoid upgrading libraries in an attempt to buffer yourself from pain or work in the near term, you're potentially setting yourself up for more pain long-term, but that's just based on my experience. Good luck!

[cqueiroz-ciandt]

Maybe a question to ask is: Is there a way to fix it without upgrading to the new version? Sometimes it is complicated to upgrade some libraries in a large project, especially when it comes with breaking changes.

My recommendation would be to upgrade your library, which is where the fix resides. I didn't experience much pain and it's a large project. If you avoid upgrading libraries in an attempt to buffer yourself from pain or work in the near term, you're potentially setting yourself up for more pain long-term, but that's just based on my experience. Good luck!

I got your point. Thank you for the advice. Upgrading to the new version is indeed one of our plans, but we are running out of time to deliver other changes. Maybe we should prioritize this one, tho.