fix(TransitionGroup): not warn unkeyed text children with whitespece preserve (#11888)

close #11885

diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts
index ba1e2bdf01e31651ed2bbf5b77c8d987eb977518..928e5d955f11415736bd6691ba79afbed251acb4 100644 (file)
--- 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(`<TransitionGroup> children must be keyed.`)
         }
       }

diff --git a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
index da3f4a42de9026efb502f81ae47af5715023476b..22f2254090263c20250d91735656dca9850c7064 100644 (file)
--- a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
+++ b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
@@ -509,6 +509,21 @@ describe('e2e: TransitionGroup', () => {
     expect(`<TransitionGroup> children must be keyed`).toHaveBeenWarned()
   })
 
+  test('not warn unkeyed text children w/ whitespace preserve', () => {
+    const app = createApp({
+      template: `
+        <transition-group name="test">
+          <p key="1">1</p>
+          <p key="2" v-if="false">2</p>
+        </transition-group>
+        `,
+    })
+
+    app.config.compilerOptions.whitespace = 'preserve'
+    app.mount(document.createElement('div'))
+    expect(`<TransitionGroup> children must be keyed`).not.toHaveBeenWarned()
+  })
+
   // #5168, #7898, #9067
   test(
     'avoid set transition hooks for comment node',