Second modal freezes on mobile and becomes unresponsive after opening

[carlosvaldesweb]

Environment

• Operating System: Darwin
• Node Version: v20.14.0
• Nuxt Version: 3.13.1
• CLI Version: 3.13.1
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: css, extends, modules, gtag, zodI18n, i18n, site, sitemap, ogImage, linkChecker, seoExperiments, seo, cookieControl, sanctum, bugsnag, eslint, image, runtimeConfig, imports, ui, devtools, experimental, colorMode, tailwindcss, routeRules
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @vueuse/motion/[email protected], [email protected], [email protected], [email protected], @dargmuesli/[email protected], [email protected], @nuxtjs/[email protected], [email protected], @nuxtjs/[email protected], @formkit/auto-animate/[email protected], [email protected], [email protected], @samk-dev/[email protected]
• Build Modules: -

Version

v2.18.7

Reproduction

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

Description

When opening a second modal from within the first modal on a mobile device, the UI freezes, and the second modal becomes unresponsive. This issue only happens on mobile devices, where the user cannot close the modal, even manually. On desktop, if a close button is added, the user can close it, but on mobile, it remains stuck and doesn't respond to any touch events.

Steps to reproduce:

Open the first modal.
Click the "Open Second" button to open the second modal.
Try to close the second modal on a mobile device.
Expected behavior: The second modal should open and close without freezing the UI, and it should be fully functional on both desktop and mobile devices.

Actual behavior: The second modal freezes the UI on mobile devices, preventing any interaction, and the user cannot close it.

Additional context

No response

Logs

No response

[benjamincanac]

This is a limitation of Headless UI, you have to wrap the second modal in the first one for this to work.

[damisparks]

@benjamincanac I had the same issue. Wrapping the second modal in the first one solves the problem. Thank you.