Merge 0fbfb31636 into 56be3dd4db

packages/runtime-core/src/components/BaseTransition.ts

@@ -545,10 +545,16 @@ export function getTransitionRawChildren(
   for (let i = 0; i < children.length; i++) {
     let child = children[i]
     // #5360 inherit parent key in case of <template v-for>
+    // #5761 if child.key is a number, it would be potentially
+    // duplicated with index i. In this case, ignore whatever
+    // existing number type child key to avoid duplication
     const key =
       parentKey == null
         ? child.key
-        : String(parentKey) + String(child.key != null ? child.key : i)
+        : String(parentKey) +
+          String(
+            child.key != null && typeof child.key !== 'number' ? child.key : i,
+          )
     // handle fragment children case, e.g. v-for
     if (child.type === Fragment) {
       if (child.patchFlag & PatchFlags.KEYED_FRAGMENT) keyedFragmentCount++

packages/runtime-dom/__tests__/TransitionGroup.spec.ts

@@ -0,0 +1,29 @@
+import {
+  Fragment,
+  TransitionGroup,
+  type VNode,
+  type VNodeArrayChildren,
+} from '@vue/runtime-dom'
+import { h, nodeOps, render } from '@vue/runtime-test'
+
+describe('TransitionGroup', () => {
+  // #5761
+  test('<template v-for + key> + v-if', () => {
+    const Comp = h(TransitionGroup, {}, () =>
+      ['A'].map(item => {
+        return h(Fragment, { key: item }, [
+          h('div', {}, ''),
+          h('div', { key: 0 }, ''), // simulate v-if branch key
+          h('div', {}, ''),
+        ])
+      }),
+    )
+
+    render(Comp, nodeOps.createElement('div'))
+
+    const children = Comp.component?.subTree.children as VNodeArrayChildren
+    expect((children[0] as VNode).key).toBe('A0')
+    expect((children[1] as VNode).key).toBe('A1') // expect key to be 'A1' instead of 'A0'
+    expect((children[2] as VNode).key).toBe('A2')
+  })
+})