diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts index ba1e2bdf01e..928e5d955f1 100644 --- a/packages/runtime-dom/src/components/TransitionGroup.ts +++ b/packages/runtime-dom/src/components/TransitionGroup.ts @@ -14,6 +14,7 @@ import { DeprecationTypes, Fragment, type SetupContext, + Text, type VNode, compatUtils, createVNode, @@ -159,7 +160,7 @@ const TransitionGroupImpl: ComponentOptions = /*@__PURE__*/ decorate({ child, resolveTransitionHooks(child, cssTransitionProps, state, instance), ) - } else if (__DEV__) { + } else if (__DEV__ && child.type !== Text) { warn(` children must be keyed.`) } } diff --git a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts index da3f4a42de9..22f22540902 100644 --- a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts +++ b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts @@ -509,6 +509,21 @@ describe('e2e: TransitionGroup', () => { expect(` children must be keyed`).toHaveBeenWarned() }) + test('not warn unkeyed text children w/ whitespace preserve', () => { + const app = createApp({ + template: ` + +

1

+

2

+
+ `, + }) + + app.config.compilerOptions.whitespace = 'preserve' + app.mount(document.createElement('div')) + expect(` children must be keyed`).not.toHaveBeenWarned() + }) + // #5168, #7898, #9067 test( 'avoid set transition hooks for comment node',