From 32679e4d64fcd61d1528df162b0339c4c91f16b8 Mon Sep 17 00:00:00 2001
From: Clay Levering <clay@blu-team.com>
Date: Mon, 20 Apr 2026 19:15:30 -0700
Subject: [PATCH 1/2] fix(Tabs,Accordion): use item value as stable key to
 avoid remounts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both `UTabs` and `UAccordion` used `:key="index"` when rendering their
`v-for` items. When items are added, removed, or reordered, Vue sees
"the same key at the same position," reuses the DOM element, and
swaps its inner content — which unmounts any stateful descendant of
the reused slot.

For `UTabs` this means every tab after the changed position loses
local state (counters, form inputs, subscriptions). For `UAccordion`
the same pattern causes content remounts and occasional hydration
oddness when combined with lazy-loaded islands.

Switch both to `:key="get(item, valueKey) ?? index"` — the same
expression already used for `:value` — so items with a user-provided
`value` get a stable identity across reorders, while items without a
value keep the previous index-based behaviour.

Closes #5841
---
 src/runtime/components/Accordion.vue | 2 +-
 src/runtime/components/Tabs.vue      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index 4d8eee90fb..b9ac2d935b 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -106,7 +106,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion ||
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
-      :key="index"
+      :key="get(item, props.valueKey as string) ?? index"
       :value="get(item, props.valueKey as string) ?? String(index)"
       :disabled="item.disabled"
       data-slot="item"
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 27bf5392b1..154b435bac 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -154,7 +154,7 @@ defineExpose({
 
       <TabsTrigger
         v-for="(item, index) of items"
-        :key="index"
+        :key="get(item, props.valueKey as string) ?? index"
         :ref="el => setTriggerRef(index, el)"
         :value="get(item, props.valueKey as string) ?? String(index)"
         :disabled="item.disabled"
@@ -187,7 +187,7 @@ defineExpose({
     </TabsList>
 
     <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="index" :value="get(item, props.valueKey as string) ?? String(index)" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content, item.class] })">
+      <TabsContent v-for="(item, index) of items" :key="get(item, props.valueKey as string) ?? index" :value="get(item, props.valueKey as string) ?? String(index)" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content, item.class] })">
         <slot :name="((item.slot || 'content') as keyof TabsSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :ui="ui">
           {{ item.content }}
         </slot>

From c41987d3280eb97ac75effdf8c962c9f904c85f9 Mon Sep 17 00:00:00 2001
From: Clay Levering <clay@blu-team.com>
Date: Mon, 20 Apr 2026 19:40:07 -0700
Subject: [PATCH 2/2] docs(Tabs,Accordion): note that item.value is used as the
 stable Vue key
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Clarify in the `TabsItem.value` and `AccordionItem.value` JSDoc that the
value doubles as the Vue `key` for rendered items — consumers should
provide a stable value if they add, remove, or reorder items and want
per-item state preserved across those changes.
---
 src/runtime/components/Accordion.vue | 7 ++++++-
 src/runtime/components/Tabs.vue      | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index b9ac2d935b..13244d7c31 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -22,7 +22,12 @@ export interface AccordionItem {
   trailingIcon?: IconProps['name']
   slot?: string
   content?: string
-  /** A unique value for the accordion item. Defaults to the index. */
+  /**
+   * A unique value for the accordion item. Defaults to the index.
+   * Also used as the Vue `key` for this item, so providing a stable value prevents
+   * accordion content (and its local state) from remounting when items are added, removed,
+   * or reordered.
+   */
   value?: string
   disabled?: boolean
   class?: any
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 154b435bac..f94bec325c 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -24,7 +24,11 @@ export interface TabsItem {
   badge?: string | number | BadgeProps
   slot?: string
   content?: string
-  /** A unique value for the tab item. Defaults to the index. */
+  /**
+   * A unique value for the tab item. Defaults to the index.
+   * Also used as the Vue `key` for this item, so providing a stable value prevents tab
+   * content (and its local state) from remounting when items are added, removed, or reordered.
+   */
   value?: string | number
   disabled?: boolean
   class?: any