chore: tweaks

packages/runtime-core/__tests__/components/BaseTransition.spec.ts

@@ -1,9 +1,3 @@
-import {
-  Fragment,
-  TransitionGroup,
-  type VNode,
-  type VNodeArrayChildren,
-} from '@vue/runtime-dom'
 import {
   BaseTransition,
   type BaseTransitionProps,
@@ -1205,71 +1199,3 @@ describe('BaseTransition', () => {
     expect(() => mount({}, () => () => h('div'), true)).not.toThrow()
   })
 })
-
-describe('TransitionGroup', () => {
-  // #5761: When child has v-if, v-if will result in keys of number type for branches
-  test('should avoid existing number type child keys duplicate with default index when inherit parent key in case of <template v-for>', () => {
-    // <TransitionGroup>
-    //  <template v-for="(item, idx) of ['A', 'B']" :key="item">
-    //    <div></div> // key: A0/B0
-    //    <div :key=0></div> simulate v-if branch key. Keys should be A1/B1, otherwise duplicate A0/B0
-    //    <div></div> // key: A2/B2
-    //  </template>
-    // </TransitionGroup>
-
-    const transitionGroupVNode = h(TransitionGroup, {}, () =>
-      ['A', 'B'].map((item, idx) => {
-        return h(Fragment, { key: item }, [
-          h('div', {}, ''),
-          h('div', { key: 0 }, ''), // simulate v-if branch key
-          h('div', {}, ''),
-        ])
-      }),
-    )
-
-    render(transitionGroupVNode, nodeOps.createElement('div'))
-
-    expect(
-      (
-        (
-          transitionGroupVNode.component?.subTree.children as VNodeArrayChildren
-        )[0] as VNode
-      ).key,
-    ).toBe('A0')
-    expect(
-      (
-        (
-          transitionGroupVNode.component?.subTree.children as VNodeArrayChildren
-        )[1] as VNode
-      ).key,
-    ).toBe('A1')
-    expect(
-      (
-        (
-          transitionGroupVNode.component?.subTree.children as VNodeArrayChildren
-        )[2] as VNode
-      ).key,
-    ).toBe('A2')
-    expect(
-      (
-        (
-          transitionGroupVNode.component?.subTree.children as VNodeArrayChildren
-        )[3] as VNode
-      ).key,
-    ).toBe('B0')
-    expect(
-      (
-        (
-          transitionGroupVNode.component?.subTree.children as VNodeArrayChildren
-        )[4] as VNode
-      ).key,
-    ).toBe('B1')
-    expect(
-      (
-        (
-          transitionGroupVNode.component?.subTree.children as VNodeArrayChildren
-        )[5] as VNode
-      ).key,
-    ).toBe('B2')
-  })
-})

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

@@ -531,10 +531,9 @@ 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: when child.key is a number, it would be potentially
+    // #5761 if child.key is a number, it would be potentially
-    // duplicated with index i. In this case, ignore whatever existing
+    // duplicated with index i. In this case, ignore whatever
-    // number type child key (e.g. v-if node could have dedicated key based on branchs).
+    // existing number type child key to avoid duplication
-    // Make it completely based on index i in children list to avoid duplication
     const key =
       parentKey == null
         ? child.key

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')
+  })
+})