Programmatically opening Modal form within an opened Slideover does not work.

[francois-duquesne-asl]

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:

• pages/test-page.vue

  
  <script setup lang="ts">
  import { SlideOverComponent } from "#components";
  const modal = useModal();
  </script>

- _SlideOverComponent.vue_
```html
<script setup lang="ts">
import { ModalComponent } from "#components";
const modal = useModal();
</script>

<template>
  <USlideover>
    <UButton label="Open" @click="modal.open(ModalComponent)" />
  </USlideover>
</template>

• ModalComponent.vue

  <template>
  <UModal> OKOK </UModal>
  </template>

[noook]

Did you correctly add <UModals /> somewhere in your app, preferably in app.vue ?

[francois-duquesne-asl]

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?

[noook]

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 ?

[francois-duquesne-asl]

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.

[francois-duquesne-asl]

I do think this is a bug... Can I (or someone) change the label, or should I create a new issue?

[noook]

I labeled it as a bug. If you could provide a minimal reproduction it would be awesome.

[francois-duquesne-asl]

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:

• ✅ clicking on the "open SlideOver" btn works fine,
• ✅ clicking on the "open Modal" btn works fine.
• ❌ clicking on the "open SlideOver" btn then on the "open Modal" btn inside the slideover is when the bug occurs.

[ahoiroman]

Got the same error if there are two modals on the page, which I open/close programmatically.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[schillerenrico]

I have got something similiar. Opening the slideover first and click on a button that opens the modal it overlaps just fine. But if I want to close the modal by clicking outside or modal.close it appears that it also closes the slideover or even closes the slideover first and after a second click on close it closes the modal. very strange.

for reproduction:

umodals and uslideovers in app.vue open a slideover that contains a button that opens a modal open the modal

expected behavior: both the slideover and the modal are showing and overlap. when clicking outside the modal it should close the modal and keep the slideover open but thats not the case