Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
VladimirCores opened this issue Jan 11, 2024 · 5 comments
Labels
bug Something isn't working v3 #1289 wontfix-v2 This will not be fixed in `v2.x`.

Comments

@VladimirCores
Copy link

VladimirCores commented Jan 11, 2024

Environment

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 VladimirCores added the bug Something isn't working label Jan 11, 2024
@VladimirCores
Copy link
Author

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

@VladimirCores
Copy link
Author

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
Copy link

mcpanl commented Jan 11, 2024

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
Copy link
Author

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

image

Copy link
Member

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

@benjamincanac benjamincanac added the v3 #1289 label Mar 13, 2024 — with Volta.net
@benjamincanac benjamincanac added the wontfix-v2 This will not be fixed in `v2.x`. label Sep 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working v3 #1289 wontfix-v2 This will not be fixed in `v2.x`.
Projects
None yet
Development

No branches or pull requests

3 participants