Nesting components no longer possible

[dvlden]

Description

When we nest some components into another, it no longer behaves correctly after the recent update that fixes animations for all components.

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/edit/vitejs-vite-y6tpym?file=src%2FApp.vue

Steps to Reproduce

1. Open the repro
2. Click to open main popover
3. Click each popover inside

• The popovers inside cannot be closed
• Opening another popover does not close the previous one

Ark UI Version

3.11.0

Framework

• React
• Solid
• Vue

Browser

All (any version)

Additional Information

Here's a thread where I provided some screenshots from my app. In my app, they are all open by default with the latest update, but nonetheless they cannot be closed, just like in the demo. With or without animation, it does not make a difference.

https://discord.com/channels/964648323304808488/964649581398855690/1280462194919604255

I want to note that this is not just with popovers. I tried nesting HoverCard inside Popover and it failed too. So I'll assume it's any component within any component that uses Float UI.

[Omikorin]

I resolved your issue by removing flex from the Popover.Content.
This element is controlled by Zag.js logic and shouldn't be given an inline style that overrides it (tailwind is the cause)

-<Popover.Content class="z-[--z-index] flex flex-col gap-y-1 overflow-clip rounded bg-white shadow-xl ring-1 ring-slate-100">
+<Popover.Content class="z-[--z-index] flex-col gap-y-1 overflow-clip rounded bg-white shadow-xl ring-1 ring-slate-100">

Repro: https://stackblitz.com/edit/vitejs-vite-rbyjdd?file=src%2FApp.vue,package.json

[segunadebayo]

Closing based on @Omikorin's comment above.

[dvlden]

Oh... Feeling embarrassed now. How did I not see this xD
Thanks @Omikorin !