fix(transition-group): transition-group edge case

packages/runtime-dom/src/components/TransitionGroup.ts

@@ -23,9 +23,12 @@ import {
   toRaw,
   compatUtils,
   DeprecationTypes,
-  ComponentOptions
+  ComponentOptions,
+  VNodeArrayChildren,
+  isVNode,
+  Comment
 } from '@vue/runtime-core'
-import { extend } from '@vue/shared'
+import { extend, PatchFlags, ShapeFlags } from '@vue/shared'
 
 interface Position {
   top: number
@@ -115,7 +118,9 @@ const TransitionGroupImpl: ComponentOptions = {
         tag = 'span'
       }
 
-      prevChildren = children
+      if (children) {
+        prevChildren = children.map(c => storeTransitionVnode(c))
+      }
       children = slots.default ? getTransitionRawChildren(slots.default()) : []
 
       for (let i = 0; i < children.length; i++) {
@@ -218,3 +223,19 @@ function hasCSSTransform(
   container.removeChild(clone)
   return hasTransform
 }
+
+// #4830
+// get the actual vnode when subTree is DEV_ROOT_FRAGMENT
+// to access the right transition element
+function storeTransitionVnode(c: VNode) {
+  if (
+    __DEV__ &&
+    c.shapeFlag & ShapeFlags.COMPONENT &&
+    c.component!.subTree.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT
+  ) {
+    const children = c.component!.subTree.children as VNodeArrayChildren
+    const vnode = children.find(c => isVNode(c) && c.type !== Comment) as VNode
+    return vnode
+  }
+  return c
+}

packages/vue/__tests__/TransitionGroup.spec.ts

@@ -508,4 +508,37 @@ describe('e2e: TransitionGroup', () => {
 
     expect(`<TransitionGroup> children must be keyed`).toHaveBeenWarned()
   })
+
+  test('DEV_ROOT_FRAGMENT transition item', async () => {
+    await page().evaluate(async () => {
+      const { createApp, ref } = (window as any).Vue
+      createApp({
+        template: `
+            <div id="container">
+              <transition-group name="test">
+                <Comp v-for="item in items" :key="item"/>
+              </transition-group>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+        setup: () => {
+          const items = ref(['a'])
+          const click = () => items.value.push('b', 'c')
+          return { click, items }
+        },
+        components: {
+          Comp: {
+            template: `<div>test</div><!-- comment -->`
+          }
+        }
+      }).mount('#app')
+    })
+    expect(await html('#container')).toBe(`<div>test</div><!-- comment -->`)
+
+    expect(await htmlWhenTransitionStart()).toBe(
+      `<div>test</div><!-- comment -->` +
+        `<div class="test-enter-from test-enter-active">test</div><!-- comment -->` +
+        `<div class="test-enter-from test-enter-active">test</div><!-- comment -->`
+    )
+  })
 })