From e8dee0bcd9a080445fefd19407f98ba578516286 Mon Sep 17 00:00:00 2001
From: Yuchao Wu <yuchao.sydneyuni@gmail.com>
Date: Fri, 22 Apr 2022 14:43:33 +1000
Subject: [PATCH 1/4] fix(runtime-core): avoid transition child key of number
 type duplication

---
 packages/runtime-core/src/components/BaseTransition.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
index 043b97365..4bacead9a 100644
--- a/packages/runtime-core/src/components/BaseTransition.ts
+++ b/packages/runtime-core/src/components/BaseTransition.ts
@@ -494,10 +494,17 @@ 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
+    // duplicated with index i. In this case, ignore whatever existing
+    // number type child key (e.g. v-if node could have dedicated key based on branchs).
+    // Make it completely based on index i in children list 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++

From e6202416f31133fb464ef2b87cde9f11c2189cc1 Mon Sep 17 00:00:00 2001
From: Yuchao Wu <yuchao.sydneyuni@gmail.com>
Date: Tue, 26 Apr 2022 00:46:05 +1000
Subject: [PATCH 2/4] Add test case

---
 .../components/BaseTransition.spec.ts         | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
index 2622cf64b..75037dbfd 100644
--- a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
+++ b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
@@ -1,4 +1,5 @@
 import { vi } from 'vitest'
+import { Fragment, TransitionGroup, VNode, VNodeArrayChildren } from '@vue/runtime-dom'
 import {
   nodeOps,
   render,
@@ -1195,3 +1196,37 @@ describe('BaseTransition', () => {
     })
   })
 })
+
+
+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')
+  })
+})

From 96d26ccccf15477e2bfb97b7a4bce8f2f2b765c1 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 2 Sep 2024 02:51:35 +0000
Subject: [PATCH 3/4] [autofix.ci] apply automated fixes

---
 .../components/BaseTransition.spec.ts         | 79 ++++++++++++++-----
 .../src/components/BaseTransition.ts          |  2 +-
 2 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
index 927d68b04..1089ef33c 100644
--- a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
+++ b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
@@ -1,4 +1,9 @@
-import { Fragment, TransitionGroup, VNode, VNodeArrayChildren } from '@vue/runtime-dom'
+import {
+  Fragment,
+  TransitionGroup,
+  type VNode,
+  type VNodeArrayChildren,
+} from '@vue/runtime-dom'
 import {
   BaseTransition,
   type BaseTransitionProps,
@@ -1201,9 +1206,8 @@ describe('BaseTransition', () => {
   })
 })
 
-
 describe('TransitionGroup', () => {
-  // #5761: When child has v-if, v-if will result in keys of number type for branches 
+  // #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">
@@ -1212,25 +1216,60 @@ describe('TransitionGroup', () => {
     //    <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')
+    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', {}, ''),
+        ])
+      }),
     )
 
-    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')
+    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')
   })
 })
diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
index 882a475d0..eed96b58a 100644
--- a/packages/runtime-core/src/components/BaseTransition.ts
+++ b/packages/runtime-core/src/components/BaseTransition.ts
@@ -540,7 +540,7 @@ export function getTransitionRawChildren(
         ? child.key
         : String(parentKey) +
           String(
-            child.key != null && typeof child.key !== 'number' ? child.key : i
+            child.key != null && typeof child.key !== 'number' ? child.key : i,
           )
     // handle fragment children case, e.g. v-for
     if (child.type === Fragment) {

From 0fbfb316361b7dc85cd6691c422ea8bef3d130e3 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Mon, 2 Sep 2024 11:17:10 +0800
Subject: [PATCH 4/4] chore: tweaks

---
 .../components/BaseTransition.spec.ts         | 74 -------------------
 .../src/components/BaseTransition.ts          |  7 +-
 .../__tests__/TransitionGroup.spec.ts         | 29 ++++++++
 3 files changed, 32 insertions(+), 78 deletions(-)
 create mode 100644 packages/runtime-dom/__tests__/TransitionGroup.spec.ts

diff --git a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
index 1089ef33c..aaeae3fb4 100644
--- a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
+++ b/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')
-  })
-})
diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
index eed96b58a..4e0c91494 100644
--- a/packages/runtime-core/src/components/BaseTransition.ts
+++ b/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
-    // duplicated with index i. In this case, ignore whatever existing
-    // number type child key (e.g. v-if node could have dedicated key based on branchs).
-    // Make it completely based on index i in children list to avoid duplication
+    // #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
diff --git a/packages/runtime-dom/__tests__/TransitionGroup.spec.ts b/packages/runtime-dom/__tests__/TransitionGroup.spec.ts
new file mode 100644
index 000000000..cec666198
--- /dev/null
+++ b/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')
+  })
+})