`UDrawer :modal="false"` closes immediately when triggered from a `UDropdownMenu`

[hasan-ozbey]

Environment

• Operating System: Linux
• Node Version: v23.6.1
• Nuxt Version: 4.1.2
• CLI Version: 3.28.0
• Nitro Version: 2.12.6
• Package Manager: pnpm@10.12.4
• Builder: -
• User Config: modules, experimental, content, css, devtools, typescript, vue, compatibilityDate, nitro, i18n, zodI18n, sanctum, vite, turnstile
• Runtime Modules: @nuxt/ui@4.0.0, @vueuse/nuxt@12.8.2, @nuxt/image@1.11.0, @nuxt/content@3.7.1, nuxt-og-image@5.1.11, nuxt-svgo@4.2.6, @pinia/nuxt@0.11.2, nuxt-zod-i18n@1.12.1, @nuxtjs/i18n@9.5.6, nuxt-auth-sanctum@1.3.0, @compodium/nuxt@0.1.0-beta.12, @nuxt/scripts@0.11.6, @nuxtjs/turnstile@1.1.0, nuxt-sanctum-precognition@0.0.8, @pinia/colada-nuxt@0.2.3
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.00

Reproduction

https://codesandbox.io/p/devbox/serverless-frost-x9qfym

Description

I've encountered a bug regarding the interaction between UDropdownMenu and a non-modal UDrawer.

When the v-model:open of a UDrawer (configured with :modal="false") is set to true from a UDropdownMenu item's onSelect event, the drawer appears for a fraction of a second and then immediately closes.

This issue does not occur if the drawer is triggered from a standard UButton outside the dropdown, which suggests a conflict between the two components.

Please see the reproduction.

[benjamincanac]

Indeed, this happens because the DropdownMenu trigger element gets focused on close. This is not specific to the Drawer but also happens with a Modal, Slideover, etc. You have multiple ways to solve this:

1. Prevent the auto focus when the DropdownMenu closes:

<UDropdownMenu :items="items" :content="{ onCloseAutoFocus: (e) => e.preventDefault() }">
  <UButton label="Open the DropdownMenu" icon="i-lucide-menu" />
</UDropdownMenu>

2. Wait for the DropdownMenu animation to finish to open the Drawer:

const items = ref<DropdownMenuItem[]>([
  {
    label: 'Open the Drawer',
    onSelect: () => {
      setTimeout(() => {
        isDrawerOpen.value = true
      }, 150)
    }
  }
])

3. Prevent the DropdownMenu close when selecting the item:

const items = ref<DropdownMenuItem[]>([
  {
    label: 'Open the Drawer',
    onSelect: (e) => {
      e.preventDefault()
      isDrawerOpen.value = true
    }
  }
])

I'm closing this as there is not really a fix to do on our side.