[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: [email protected]
• 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.

[benjamincanac]

Closing for now, feel free to reopen if it didn't solve!

[EvertonWingert]

Using :portal="false" didn't work here (the items don't even appear anywhere on the screen when activated), I'll leave it closed because I can solve it by adding z-50 to (select, selectMenu)

[benjamincanac]

Adding z-50 to the content does fix the issue but it's a bit tedious. I think the solution here is to remove the z-index from the modal, I just tried and it seems to be useless.