fix(TransitionGroup): not warn unkeyed text children with whitespece …

…preserve (#11888) close #11885
vuejs · Sep 13, 2024 · 7571f20 · 7571f20
1 parent 8ea5d6d
commit 7571f20
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git 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
@@ -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',