[Select] Incorrect z-index of select within modal

[EvertonWingert]

Environment

• Operating System: Windows_NT
• Node Version: v20.16.0
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: npm@10.8.2
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Version

3.0.0-alpha.5

Reproduction

https://github.com/EvertonWingert/nuxtui-modal-select-issue

Description

When using a select inside a modal(slideover, drawer), the options list is rendered behind the modal content. This appears to be a z-index issue where the dropdown is not properly layered above the modal.

Additional context

<template>
  <UModal title="Modal with description" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
    <UButton label="Open" />

    <template #body>
      <USelectMenu v-model="value" :items="items" />
    </template>
  </UModal>
</template>
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

Logs

No response

[Davounet]

I am having the same issue. It is tricky to fix, because since everything is teleported at the body root we can't use the stacking contexts.

[EvertonWingert]

I managed to fix it using the following configuration

ui: {
    select: {
        slots: {
            content: 'z-50'
        }
    },
    selectMenu: {
        slots: {
            content: 'z-50'
        }
    }
}

[benjamincanac]

Since the SelectMenu is in Modal which is portaled to the body, you might want to set :portal="false" on the SelectMenu.