Using UTabs inside a USlideover skips the enter transition

[reinventit]

Environment

• Operating System: Darwin
• Node Version: v18.17.0
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: alias, devtools, app, modules, runtimeConfig, ui, vite
• Runtime Modules: @nuxt/[email protected], @hebilicious/[email protected]
• Build Modules: -

Version

2.12.2

Reproduction

https://stackblitz.com/edit/nuxt-ui-hjgjgd

Description

First of, love the project, thank you so much for sharing this with the community!

I have run into a weird bug when using UTabs component inside the USlideover the enter animation does not work. Please see the StackBlitz link for a minimal reproducible situation. Can anybody help me analyse what is going on here?

Additional context

No response

Logs

No response

[benjamincanac]

Indeed, this is really strange! I don't have any clue at the moment as to why this happens but I've been able to fix it quickly by wrapping the UTabs around a <ClientOnly>:

<USlideover v-model="isOpen">
  <ClientOnly>
    <UTabs :items="items" />
  </ClientOnly>
</USlideover>

Will look into it as soon as possible!

[abolix]

I have the exact same problem. Entry animations on UModal & USlideover are not working. I tried wrapping it in ClientOnly, still not fixed.

Nuxt : 3.13.2 Nuxt UI : 3.18.5

-- Update --

Can be a issue with Headless UI #2636

[benjamincanac]

@abolix https://github.com/nuxt/ui/issues/2127