From 4061a309b1fcff1560c52cc85906bd38ee712b1d Mon Sep 17 00:00:00 2001 From: royalknight56 <2930470134@qq.com> Date: Tue, 29 Aug 2023 11:04:53 +0800 Subject: [PATCH 1/5] fix(runtime-dom): TransitionGroup children el may be null --- packages/runtime-dom/src/components/TransitionGroup.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts index fc5d260b91e..ef30cf9be4e 100644 --- a/packages/runtime-dom/src/components/TransitionGroup.ts +++ b/packages/runtime-dom/src/components/TransitionGroup.ts @@ -112,7 +112,7 @@ const TransitionGroupImpl: ComponentOptions = { tag = 'span' } - prevChildren = children + prevChildren = children.filter((c: VNode) => c.el?.getBoundingClientRect) children = slots.default ? getTransitionRawChildren(slots.default()) : [] for (let i = 0; i < children.length; i++) { From 67be5737eca0f6133ded548dc8a094b74baf78cd Mon Sep 17 00:00:00 2001 From: royalknight56 <2930470134@qq.com> Date: Wed, 30 Aug 2023 14:32:48 +0800 Subject: [PATCH 2/5] fix(runtime-dom): children may be null --- packages/runtime-dom/src/components/TransitionGroup.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts index ef30cf9be4e..74ec239f585 100644 --- a/packages/runtime-dom/src/components/TransitionGroup.ts +++ b/packages/runtime-dom/src/components/TransitionGroup.ts @@ -112,7 +112,7 @@ const TransitionGroupImpl: ComponentOptions = { tag = 'span' } - prevChildren = children.filter((c: VNode) => c.el?.getBoundingClientRect) + prevChildren = children?.filter((c: VNode) => c.el?.getBoundingClientRect) children = slots.default ? getTransitionRawChildren(slots.default()) : [] for (let i = 0; i < children.length; i++) { From fa231f07a83c6970dbfb04f37850b7c82f69098f Mon Sep 17 00:00:00 2001 From: royalknight56 <2930470134@qq.com> Date: Wed, 30 Aug 2023 14:35:49 +0800 Subject: [PATCH 3/5] fix(runtime-dom): add test --- .../vue/__tests__/e2e/TransitionGroup.spec.ts | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts index 434735b5e9e..bb48fcf1e16 100644 --- a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts +++ b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts @@ -508,4 +508,51 @@ describe('e2e: TransitionGroup', () => { expect(` 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: ` +
+ + + +
+ + + `, + components: { + Comp: { + template: '
one
' + } + }, + 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('') + // splice + await htmlWhenTransitionStart() + await transitionFinish() + expect(await html('#container')).toBe(``) + // push back + await page().evaluate(() => { + ;(document.querySelector('#pushwBtn') as any)!.click() + }) + await transitionFinish() + expect(await html('#container')).toBe('') + }) }) From 6d8ab7399fb3ff949a38bcd96e6e9b10bcc16347 Mon Sep 17 00:00:00 2001 From: royalknight56 <2930470134@qq.com> Date: Wed, 30 Aug 2023 14:40:51 +0800 Subject: [PATCH 4/5] fix(runtime-dom): text fix --- packages/vue/__tests__/e2e/TransitionGroup.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts index bb48fcf1e16..7c0618759cf 100644 --- a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts +++ b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts @@ -521,7 +521,7 @@ describe('e2e: TransitionGroup', () => { - + `, components: { Comp: { @@ -550,7 +550,7 @@ describe('e2e: TransitionGroup', () => { expect(await html('#container')).toBe(``) // push back await page().evaluate(() => { - ;(document.querySelector('#pushwBtn') as any)!.click() + ;(document.querySelector('#pushBtn') as any)!.click() }) await transitionFinish() expect(await html('#container')).toBe('') From 4a4060580b97ca8593f82f8698c3ace960559ece Mon Sep 17 00:00:00 2001 From: royalknight56 <2930470134@qq.com> Date: Thu, 31 Aug 2023 16:20:51 +0800 Subject: [PATCH 5/5] fix: after review --- .../runtime-dom/src/components/TransitionGroup.ts | 4 +++- packages/vue/__tests__/e2e/TransitionGroup.spec.ts | 14 +++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts index 74ec239f585..5ca4b3b3ba3 100644 --- a/packages/runtime-dom/src/components/TransitionGroup.ts +++ b/packages/runtime-dom/src/components/TransitionGroup.ts @@ -112,7 +112,9 @@ const TransitionGroupImpl: ComponentOptions = { tag = 'span' } - prevChildren = children?.filter((c: VNode) => c.el?.getBoundingClientRect) + 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++) { diff --git a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts index 7c0618759cf..360b40162a4 100644 --- a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts +++ b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts @@ -515,13 +515,13 @@ describe('e2e: TransitionGroup', () => { const { createApp, ref } = (window as any).Vue createApp({ template: ` -
- - - -
- - +
+ + + +
+ + `, components: { Comp: {