-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Opening Healdess UI Dialog (Modal) via another Dialog (Modal) closes the previous Dialog (Modal) automatically? #3193
Comments
I got the same exact issue in headlessui/react v2+ now. |
I solved it by placing the DialogPanel2.vue inside the DialogPanel1.vue:
|
This issue is still happening. I've opened an issue in Nuxt ui: In my case i need only 1 Modal to show Pricing in the page, but sometimes another modal opens this modal, so i can't to add inside of other modals. Also some features are paid in my web, so i cannot add 3 times this modal in the same Page. |
I am using the
HeadlessUI/Vue
component in myNuxt 3
application to build the Dialog/Modals. I am using the latest version"@headlessui/vue": "^1.7.22"
and developing in Chrome latest browser.Minimal reproduction repo in CodeSandBox
I am creating a
DialogPanel1.vue
using theheadlessui/vue
. I have a button inDialogPanel1.vue
on clicking it I am opening theDialogPanel2.vue
but withinDialogPanel2.vue
when I click anywhere then it automatically closes theDialogPanel1.vue
which is behind theDialogPanel2.vue
.Why is it closing
DialogPanel1
automatically? I want to ensure thatDialogPanel1
is closed only when I click the close button inDialogPanel1.vue
not for any click onDialogPanel2
. I tried adding the@click.stop
or@mousedown.stop
to prevent the propagation of the event but it's still not working. Can anyone please let me know the issue?Following is my complete code
/pages/Test.vue
:Following are my components
/component/DialogPanel1.vue
:Following is my
/components/DialogPanel2.vue
:Why clicking anywhere on
DialogPanel2.vue
automatically closes the previous DialogDialogPanel1.vue
?Following issue my issue GIF:
The text was updated successfully, but these errors were encountered: