On mobile device can't click inside items of modal if multiple are open

[CyberCowboy404]

Environment

• Operating System: Darwin
• Node Version: v20.9.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: app, runtimeConfig, stripe, devtools, modules, gtag, supabase, imports, i18n, colorMode, vue, vite
• Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], [email protected], [email protected], [email protected], @nuxtjs/[email protected], @pinia/[email protected], @pinia-plugin-persistedstate/[email protected], @nuxt/[email protected], @vueuse/[email protected], @unlok-co/[email protected]
• Build Modules: -

Version

2.15.2

Reproduction

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

Description

Weird behavior with modals on mobile devices(with tap event) When I have modal opened with prevent-close attr, I cannot click anything inside modal. In element inspection I notice that touch-action: auto; adds to clicked elements.

Initially I noticed this bug on my project. By default I have modal opened on the page with prevent close attr, and when I opened another modal, on mobile devices the actions inside second modal were blocked. But during creation of reproduction, I've noticed that button don't respond even in the first modal(on mobile device)

I was able to fix it(in my project), by closing the first modal. But it's weird because on desktops everything works fine

Additional context

No response

Logs

No response

[outlabsio]

I have similar issues on desktop, with a Slideover open which has prevent-close attr set to true, you cant interact with a modal

[dalirnet]

In my opinion, this code is not functioning correctly.

@headlessui-vue/src/components/dialog/dialog.ts

    let outsideClickEnabled = computed(() => {
      if (!enabled.value) return false
      if (hasNestedDialogs.value) return false /* This condition is always evaluating to false */
      return true
    })

[Sovai]

having the same issue on mobile. it's does not focus on the new open modal

[soylomass]

Same, but causes problems in desktop too (ie. inputs not interactable).

[archit-credilio]

An, easy/quick fix to this problem until this is resolved at the framework level would be to nest the multiple dialogs instead of having them at root/same level

[ub1qq]

I spent 5 hours and shot myself in the foot twice, but I came up with this:

Component.vue

<template>
    <Button
        v-text="click me"
        @click="action"
        @touch="action"
    />
</template>

<script setup lang="ts">
const action = () => {
    alert('OK')
}
</script>

Button.vue

<template>
    <button
        ref="button"
        v-bind="$attrs"
    />
</template>

<script setup lang="ts">
const button = ref()
const emit = defineEmits(['touch'])

const touchStart = () => {
    emit('touch')
}

onMounted(() => {
    button.value.addEventListener('touchstart', touchStart)
})

onBeforeUnmount(() => {
    button.value.removeEventListener('touchstart', touchStart)
})
</script>

This looks terrible, but it allows buttons to work on touch devices when multiple modals are open at once.

If you use this code in case when only 1 modal window will be opened, then @ click and @ touch will probably be triggered simultaneously (on touch devices).