headlessui
headlessui copied to clipboard
tailwindlabs
headlessui / When two modals are opened as brothers(not nested child)
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 :
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.
IMO We might need nested modals in some cases when we have global modals like auth etc 🙇🏼
https://github.com/tailwindlabs/headlessui/assets/69431456/8d1d109c-9914-4149-a678-2b778b00be8f
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)}>
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" />
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.
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.
@RobinMalfait can you confirm this was fixed with the vue version as well and follows the same @insiders tag?
@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.
@RobinMalfait thanks, is there a separate ticket I should follow for the vue version?
@RobinMalfait It's working well and very much appreciate your effort! Thank you.
Is there an issue/discussion that we can follow for Vue implementation of this feature?
