If two modal boxes are opened in order, clicking on the mask layer will cause both modal boxes to be closed simultaneously

[mcpanl]

Environment

• Operating System: Windows_NT
• Node Version: v18.12.1
• Nuxt Version: 3.9.0
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: yarn@1.22.19
• Builder: -
• User Config: ssr, app, devtools, build, vite, experimental, modules, i18n, typescript, runtimeConfig, devServer, routeRules
• Runtime Modules: @nuxt/ui@2.10.0, @nuxtjs/i18n@8.0.0, @nuxtjs/color-mode@3.3.2, @nuxt/image@1.1.0
• Build Modules: -

Version

v3.9.0

Reproduction

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

Description

Without setting prevent close, if Modal Box 1 and Modal Box 2 are opened in order, clicking on the mask layer will cause both dialog boxes to be closed simultaneously. The correct logic should be to close Modal Box 2 the first time the mask layer is clicked, and Modal Box 1 will only be closed the second time the mask layer is clicked

Additional context

No response

Logs

No response

[benjamincanac]

This won't work unfortunately due to a limitation of Headless UI. You have to either nest your modals or close the first modal and open the second one in a timeout equal of the delay of the first modal. Some references:

• headlessui / When two modals are opened as brothers(not nested child) tailwindlabs/headlessui#2876
• 2nd Dialog Modal not getting focus to form elements on render. tailwindlabs/headlessui#2205 (comment)

[alexcroox]

Will the switch away from Headless UI resolve this in v3?

[benjamincanac]

It already does 😊
https://volta.s3.fr-par.scw.cloud/Clean_Shot_2024_05_20_at_10_56_12_26efab2079.mp4

[alexcroox]

Amazing thank you so much!