fix(runtime-dom): TransitionGroup children el may be null

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

@@ -112,7 +112,9 @@ const TransitionGroupImpl: ComponentOptions = {
         tag = 'span'
       }
 
-      prevChildren = children
+      prevChildren =
+        children &&
+        children.filter((c: VNode) => c.el && c.el.getBoundingClientRect)
       children = slots.default ? getTransitionRawChildren(slots.default()) : []
 
       for (let i = 0; i < children.length; i++) {

packages/vue/__tests__/e2e/TransitionGroup.spec.ts

@@ -508,4 +508,51 @@ describe('e2e: TransitionGroup', () => {
 
     expect(`<TransitionGroup> children must be keyed`).toHaveBeenWarned()
   })
+
+  test('TransitionGroup on child components with empty root node', async () => {
+    const pageTemp = await page()
+    pageTemp.evaluate(() => {
+      const { createApp, ref } = (window as any).Vue
+      createApp({
+        template: `
+        <div id="container">
+          <transition-group name="group">
+            <Comp v-for="item in items" :key="item"></Comp>
+          </transition-group>
+        </div>
+        <button id="toggleBtn" @click="click">button</button>
+        <button id="pushBtn" @click="change">button</button>
+            `,
+        components: {
+          Comp: {
+            template: '<div v-if="false">one</div>'
+          }
+        },
+        setup: () => {
+          const items = ref(['1', '2'])
+          const click = () => {
+            setTimeout(() => {
+              items.value.splice(0, 1)
+            })
+          }
+          const change = () => {
+            items.value.push('3')
+          }
+          return { items, click, change }
+        }
+      }).mount('#app')
+    })
+
+    expect(await html('#container')).toBe('<!--v-if--><!--v-if-->')
+    // splice
+    await htmlWhenTransitionStart()
+    await transitionFinish()
+    expect(await html('#container')).toBe(`<!--v-if-->`)
+    // push back
+    await page().evaluate(() => {
+      ;(document.querySelector('#pushBtn') as any)!.click()
+    })
+    await transitionFinish()
+    expect(await html('#container')).toBe('<!--v-if--><!--v-if-->')
+  })
 })