transition-group containing component with multiple root nodes throws error when transitioning (child.el.getBoundingClientRect is not a function)

[catrope]

Version

3.2.12

Reproduction link

sfc.vuejs.org/

Steps to reproduce

• Load the SFC playground link. Note that it throws a warning on load.
• Click the "Toggle transition" button. Note that this throws a warning, but otherwise behaves correctly.
• Click the "Toggle transition" button again. This throws an error.

What is expected?

The transition toggles without warnings or errors.

What is actually happening?

• When the SFC playground loads, it throws the warning Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
• When the transition toggles on, it throws the warning Component inside <Transition> renders non-element root node that cannot be animated.
• When it toggles off, it throws the error child.el.getBoundingClientRect is not a function.

---

This only happens if one of the things being toggled inside a <transition-group> is a component with multiple root elements. Somehow, this results in the TransitionGroup code trying to process a text node (namely, the whitespace node at the beginning of the transition-group div, before the first child element) as part of the transitioned nodes. This is why it complains about the component rendering "fragment or text root nodes", then about a "non-element root node" (the text node), and why it crashes (it tries to call .getBoundingClientRect() on this text node).

The real-world case where I ran into this bug used a wrapped transition group (<transition-group tag="div">). Adding tag="div" makes the first warning (the one on load about extraneous non-props attributes) go away, but doesn't fix the second warning or the error.

[posva]

• The first warning is because transition doesn't accept an attribute class and it cannot fallthrough it because it has multiple children, you should remove the attribute or make multi element have one root element to silence the warning
• Your transition-group needs one single root element as its direct children in order to apply the classes, if you fix that in your multi-element component, it works. The warning isn't clear, though, see Warning of <Transition> with non-element root/multiple children isn't clear #3338.

[catrope]

I think this issue was closed incorrectly: my example doesn't involve a <transition> (which, you're right, can't have multiple children), it involves a <transition-group> (which can have multiple children, and is designed for that exact purpose)

[posva]

Updated the comment to be clearer, the children should be direct to transition-group or use the transition-group inside

[catrope]

Are you saying a <transition-group> works only with a single child tag that uses v-for to multiply itself, but not with multiple separate children? If that's the case, I would ask that the documentation be updated to make that clear. I ran into this issue when migrating code that my colleagues wrote from Vue 2 to Vue 3, and they had used a <transition-group> to wrap to separate tags (see this snippet).