You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am using the HeadlessUI/Vue component in my Nuxt 3 application to build the Dialog/Modals. I am using the latest version "@headlessui/vue": "^1.7.22" and developing in Chrome latest browser.
I am creating a DialogPanel1.vue using the headlessui/vue. I have a button in DialogPanel1.vue on clicking it I am opening the DialogPanel2.vue but within DialogPanel2.vue when I click anywhere then it automatically closes the DialogPanel1.vue which is behind the DialogPanel2.vue.
Why is it closing DialogPanel1 automatically? I want to ensure that DialogPanel1 is closed only when I click the close button in DialogPanel1.vue not for any click on DialogPanel2. 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?
This issue is still happening. I've opened an issue in Nuxt ui: nuxt/ui#2431
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: