Click on top overlay background when multiple overlays on screen close first opened

[VladimirCores]

Environment

• Operating System: Linux
• Node Version: v18.19.0
• Nuxt Version: 3.9.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: yarn@1.22.19
• Builder: -
• User Config: anime, app, colorMode, devtools, eslint, fontMetrics, googleFonts, imports, modules, nitro, pwa, runtimeConfig, spaLoadingTemplate, ssr, tailwindcss, telemetry, ui, vite
• Runtime Modules: @vite-pwa/nuxt@0.4.0, @hypernym/nuxt-anime@2.1.1, @nuxtjs/fontaine@0.4.1, @nuxtjs/google-fonts@3.1.3, @nuxtjs/eslint-module@4.1.0, @nuxt/ui@2.11.1
• Build Modules: -

Version

2.11.1

Reproduction

https://stackblitz.com/edit/nuxt-ui-ush1s6?file=app.vue

Description

When USlideover shown and UModal opened on top of it click on overlay in Modal (or anywhere in modal) close USlideover.

Preview:

Screencast.from.2024-01-11.07-52-06.webm

Additional context

Template:

<div>
  <UButton label="Open Slideover" @click="isSledeoverOpen = true" />
  <UModal prevent-close v-model="isModalOpen">
    <div class="p-4">
      Click anywhere in modal
      <Placeholder class="h-48" />
      <UButton label="Close Modal" @click="isModalOpen = false" />
    </div>
  </UModal>
  <USlideover overlay appear v-model="isSledeoverOpen">
    <UButton label="Open Modal" @click="isModalOpen = true" />
    <div class="p-4 flex-1">
      <Placeholder class="h-full" />
    </div>
  </USlideover>
</div>

Script:

<script setup>
const isModalOpen = ref(false);
const isSledeoverOpen = ref(false);
</script>

Logs

No response

[VladimirCores]

I would like to show action confirmation "dialog" but interacting with it close slideover to disapear.

[VladimirCores]

Using property prevent-close on USlideover stops it from closing but as consequence it became impossible to close slideover by clicking on gray overlay...

[mcpanl]

I have encountered similar problems before #1204

I hope it can be fixed as a bug instead of "nesting them" or "closing one before opening another"

Because we may encapsulate some commonly used dialog boxes as utility classes, and other places can be directly opened and passed some parameters through "openXModal (12)". This approach usually involves inserting VNode or div elements into the body, making it difficult to implement nested structures
@benjamincanac 🙏🙏🙏

[VladimirCores]

Also they all part of a common parent, the headless portals, and this might be the problem:

[benjamincanac]

Both components uses Headless UI Dialog underneath, the only way to achieve this is to nest them as mentioned in tailwindlabs/headlessui#2876 (comment)