Version
3.2.11
Reproduction link
codesandbox.io
Steps to reproduce
- Load the CodeSandbox link. Open the CodeSandbox console (using the console link in the bottom left corner of the preview area) and note that a warning about
<TransitionGroup> has already appeared.
- Click the "Toggle transition" button
What is expected?
The transition works (the hidden image appears)
What is actually happening?
An error is thrown when attempting the transition (child.el.getBoundingClientRect is not a function), and the transition doesn't work. Additionally, a warning is thrown on load (<TransitionGroup> children must be keyed)
This issue is related to #4621, but it's a much more bizarre version of it. All of the following conditions must be met to reproduce the bug:
- A
<transition-group> that contains two elements, separated by whitespace, with the first element initially hidden using v-if and the second element always shown. Unhiding the first element triggers the error.
- The migration build (
@vue/compat) must be used; the bug doesn't happen if you use the regular non-migration build (vue)
- The component containing the
<transition-group> must be compiled on the client side. The bug doesn't happen if this component is pre-compiled on the server side. (To make client-side compilation work, the full build must be used rather than the runtime-only build.)
Like in #4621, the bug happens because the TransitionGroup code tries to process a text node as one of the nodes being transitioned, in this case the text node between the two <p> elements. Text nodes don't have a .getBoundingClientRect() method, which is what causes the error. The warning about TransitionGroup children needing to be keyed is also caused by the text node (it's checked for a key, and it doesn't have one).
In the real-world use case that revealed this bug (see https://phabricator.wikimedia.org/T289019#7322619 ), the <transition-group> has tag="div" set, one of the children is a component instead of a plain tag, and the <transition-group> is nested inside a <transition> via another component's slot, but those things don't appear to matter, so I've removed them to simplify the (already complex) minimal reproduction.
Version
3.2.11
Reproduction link
codesandbox.io
Steps to reproduce
<TransitionGroup>has already appeared.What is expected?
The transition works (the hidden image appears)
What is actually happening?
An error is thrown when attempting the transition (
child.el.getBoundingClientRect is not a function), and the transition doesn't work. Additionally, a warning is thrown on load (<TransitionGroup> children must be keyed)This issue is related to #4621, but it's a much more bizarre version of it. All of the following conditions must be met to reproduce the bug:
<transition-group>that contains two elements, separated by whitespace, with the first element initially hidden usingv-ifand the second element always shown. Unhiding the first element triggers the error.@vue/compat) must be used; the bug doesn't happen if you use the regular non-migration build (vue)<transition-group>must be compiled on the client side. The bug doesn't happen if this component is pre-compiled on the server side. (To make client-side compilation work, the full build must be used rather than the runtime-only build.)Like in #4621, the bug happens because the TransitionGroup code tries to process a text node as one of the nodes being transitioned, in this case the text node between the two
<p>elements. Text nodes don't have a.getBoundingClientRect()method, which is what causes the error. The warning about TransitionGroup children needing to be keyed is also caused by the text node (it's checked for a key, and it doesn't have one).In the real-world use case that revealed this bug (see https://phabricator.wikimedia.org/T289019#7322619 ), the
<transition-group>hastag="div"set, one of the children is a component instead of a plain tag, and the<transition-group>is nested inside a<transition>via another component's slot, but those things don't appear to matter, so I've removed them to simplify the (already complex) minimal reproduction.