UTabs can show two active triggers after hydration when SSR and client items differ

[onmax]

Hi, I’m not sure if this is a bug or intended, so I’d mainly like advice.

Small repro:
https://github.com/onmax/repros/tree/main/nuxt-ui-tabs-hydration-refresh

This is a simplification of an issue we hit in our app:

• the selected tab is already known from the URL
• the full tab list is loaded later from backend data
• so SSR renders one tab list, and the client hydrates with a different one

After hydration, UTabs can end up with:

• two triggers marked active
• but only one tab panel rendered

I previously opened #6374.

That was closed, and #6380 was merged instead.

From my limited understanding, #6380 fixes stable keys/remounting, but not this hydration mismatch case. I may be wrong though.

Would you consider this a real UTabs bug, or is this usage pattern unsupported / expected?

[benjamincanac]

@onmax Do you still encounter the issue with latest pkg.pr.new?

[onmax]

Yes, I still reproduce it with @nuxt/ui from https://pkg.pr.new/@nuxt/ui@969c2cad994c0fff0feed2506e4979c88ee96c2e (4.6.1): after hydration the model remains "three", but both One and Three are active and Vue reports hydration mismatch warnings.

Repro updated