Open francois-duquesne-asl opened 4 weeks ago
Did you correctly add <UModals />
somewhere in your app, preferably in app.vue
?
Yep. The other modals I open programmatically work just fine.
In my app.vue
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<UNotifications />
<USlideovers />
<UModals />
</div>
</template>
Could the order of USlideovers and UModals have an impact?
I am wondering. Could you provide a link to a reproduction ? Could be a z-index
conflict maybe, do you know if your modal appears in the dom, or does it log something when being mounted ?
So, the modal does indeed log something on mounted but seems to disappear just after. When I click on the trigger btn for the modal, the #headlessui-portal-root div (that was present for the sidepanel) disappears. It feels like the new modal is in conflict with the slideover, they both seem to use the #headlessui-portal-root div.
I tried adding prevent-close prop to the USlideover but this did not change the output.
I do think this is a bug... Can I (or someone) change the label, or should I create a new issue?
I labeled it as a bug. If you could provide a minimal reproduction it would be awesome.
Thx! Here is a stackblitz env: https://stackblitz.com/edit/github-olfzub?file=app.vue
I am not too familiar with stackblitz but I did manage to reproduce the bug, hope it works fine for you. 👍
So, to recap:
Got the same error if there are two modals on the page, which I open/close programmatically.
Description
Hey!
Not sure if this is a bug or a malpractice from my side.
I have my ModalComponent.vue and y SlideOverComponent.vue as separate components that I mould like to open programmatically.
First the user should open the slideover. Then, inside the slideover the user clicks on a button that should trigger the modal to open. However, this does not work, and I wonder why. This works fine when the components are not opened programmatically but with an isOpen value (so in the same file).
Minimal reproduction env: https://stackblitz.com/edit/github-olfzub?file=app.vue
My example code: