SelectMenu content is cut by Modal overflow-hidden

[kmilogp8496]

Environment

• Operating System: Linux
• Node Version: v20.9.0
• Nuxt Version: 3.10.3
• CLI Version: 3.10.1
• Nitro Version: 2.8.1
• Package Manager: pnpm@8.15.4

Version

v2.14.1

Reproduction

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

Description

When a SelectMenu is open inside a Modal component, if the SelectMenu content exceeds the Modal dimensions, the overflow is hidden so the content can't be seen.

Additional context

Logs

No response

[Oiwawa]

Hi there. I am using the latest versions of nuxt/ui and nuxt/ui-pro where this issue should be fixed but I'm still having the issue.

"@nuxt/ui-pro@^1.0.0": version "1.0.2"
"@nuxt/ui@^2.14.2": version "2.14.2"

Here is the full component, it's based on the exemples found in the SelectMenu doc as well as the Modal from the Template Dashboard repo

        <UDashboardModal v-model="isNewNetworkModalOpen" title="Nouveau réseau" description="Créer un nouveau réseau" >
         <NetworkCreateForm @close="isNewNetworkModalOpen = false" />
        </UDashboardModal>

<template>
  <UForm :validate-on="['submit']" :state="network" class="space-y-4" @submit="onSubmit">
    <UFormGroup label="Nom du réseau" name="networkName">
      <UInput v-model="network.name" label="networkName" required/>
    </UFormGroup>

    <UFormGroup label="Domaine d'activité" name="networkName">
      <USelectMenu v-model="network.activityType" label="networkName" :options="domains.data" option-attribute="name" value-attribute="id" placeholder="- Choisir un domaine d'activité - " required />
    </UFormGroup>

    <div class="flex justify-end gap-3">
      <UButton label="Annuler" color="gray" variant="ghost" @click="emit('close')" />
      <UButton type="submit" label="Créer" color="blue" />
    </div>
  </UForm>
</template>

I have upgraded versions just a few hours after this was closed. Thanks for the help ! @benjamincanac

[benjamincanac]

@Oiwawa Mmmh it might be because of an overflow-y-auto in the DashboardModal component. Can you try to set :ui="{ body: { base: 'overflow-visible' } }" on the UDashboardModal?

[Oiwawa]

@Oiwawa Mmmh it might be because of an overflow-y-auto in the DashboardModal component. Can you try to set :ui="{ body: { base: 'overflow-visible' } }" on the UDashboardModal?

Yep this fixes it. Thanks !

[benjamincanac]

I've updated it as well in @nuxt/ui-pro repository.