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

VladimirCores commented 7 months ago

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 commented 7 months ago

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

VladimirCores commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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

benjamincanac commented 5 months ago

Both components uses Headless UI Dialog underneath, the only way to achieve this is to nest them as mentioned in https://github.com/tailwindlabs/headlessui/issues/2876#issuecomment-1849866552

nuxt / ui