Many issues with Transition since 3.4.26 #11061
Labels
❗ p4-important
Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf.
regression
scope: transition
Vue version
3.4.26, 3.4.27
Link to minimal reproduction
https://play.vuejs.org/#eNqFVMGO2jAQ/ZWpL0kkGg7tCQHt7opKraq26nJbc8iGCTEYO7IdSoX49x3bwGZ3gc0hsj1vnt/Yb7xjN02Tb1pkAza0pRGNA4uubcZciXWjjYMdTE2hrHBCqx7UPTBYwR4qo9eQUGbCFVelVtYB/ecBByOPSqtCWsyOUakXd1o5VM4e4g8zCnJVtaoMWYRI8zwvzMJmsOMKwA/zSptJUdZpSrMMRuMuU74pZIt509o6vXdGqEVAZUS8f8HtTkWkB25DdRoFdeon0K0yLgSQ/9Z6jgNIdOs+CpUcogBa3SJJwwkpMSnKA238fCnJY4gD6USTkKIY2ncYjrk9mGuFbxlepUKApWepbiqCXtZS+PA1KbGYn1hs8Fox0gPOMxxzLxXzKvXdYi5ricW8kdJloVsmp5wcGX0CX+ChTpO52CQ9MvYK/9O9OkMm9tnJ1I+yGQzOoIKXI+xbGGYzv1H02bAfe4e6hiYO140sHNIMYPjYOkf++1pKUa5GnHWb5MNpwllAA5Cx48oAdrtOR+1pG2LrR7pIXWpqUUV3CgNhifrZ45xBP2Iag2Mi6rbMUguVJpyrJCPaYd9DfA0d3azHnKXNK7HIl1Yreh7CHXj560ZINL8bv4/ljHRG5ZwVUup/P8KaP9TDTVBOjeXqzPrSbv0aZ38MWjQb5OwUc9TG6GJ4cv8LtzQ+BakjW0noK8G/aLVs41l42G2r5iS7gwtqv4dHjp6NqZ1s6XjssSgv1COjnzijl+7uSunPcj/ln0MeGYPtnwANbbJq
Steps to reproduce
When using Transition in a render function, it seems to be broken under a number of circumstances.
First, an example that works, even though I've added an undefined prop:
https://play.vuejs.org/#eNqFVMGO2jAQ/ZWpL0kkFA7tCQHt7opKraq26nJbc8gmE2IwdmQ7lArx7x3bwKa7QHOIbM+b5zf2G+/ZXdvm2w7ZiI1taUTrwKLr2ilXYtNq42APc1MoK5zQagDNAAzWcIDa6A0klJlwxVWplXVA/yrgYOJRaV1Ii9kpKvXyQSuHytlj/GlBQa7qTpUhixBpnueFWdoM9lwB+GFeazMryiZNaZbBZNpnyreF7DBvO9ukj84ItQyojIgP/3C7cxHpkdtQnUZBk/oJ9KuMCwHkv90IOlVhLRRWxxiAVvdIwnBGOkyK8kgaP19I8hziQCrRJKQnhg49hlPuACqt8C3Dq1QIsPQi1V1N0OtaCh++JSUW8w2LLd4qRnrAZYZT7rViXqX+t5jrWmIxb6T0WeiOySdnP0aXwEd4atKkEttkQLZe458RJM6QhX12MvejbAGjC6jg5Aj7HIbZwm8UXTYexs6hnqGJw00rC4c0Axg/d86R+z6VUpTrCWf9Fnl3nnAW0ABk67gygv2+108H2obYhpEuUpeaGlTRncJIWKJ+cThnMIyY1uCUiPoNs9JCpQnnKsmIdjz0EF9DTzcbMGdp81os85XVih6HcAde/qYVEs2P1u9jOSOdUTlnhZT699ew5g/1eBOU02C5vrC+sju/xtlPgxbNFjk7xxw1MboYnj1+xx2Nz8GNrjpJ6BvBX2i17OJZeNg9NTDJ7uGC2i/hiaNHY25nOzoeeyrKC/XI6CfO6J17uFH6i9z3+YeQR8Zgh7+fdrJF
Second, an example where I've explicitly set the mode to "out-in", which generates internal errors:
https://play.vuejs.org/#eNqFVMGO2jAQ/ZWpL0kkGg7tCQHt7opKraq26nJbc8iGCTEYO7IdSoX49x3bwGZ3gc0hsj1vnt/Yb7xjN02Tb1pkAza0pRGNA4uubcZciXWjjYMdTE2hrHBCqx7UPTBYwR4qo9eQUGbCFVelVtYB/ecBByOPSqtCWsyOUakXd1o5VM4e4g8zCnJVtaoMWYRI8zwvzMJmsOMKwA/zSptJUdZpSrMMRuMuU74pZIt509o6vXdGqEVAZUS8f8HtTkWkB25DdRoFdeon0K0yLgSQ/9Z6jgNIdOs+CpUcogBa3SJJwwkpMSnKA238fCnJY4gD6USTkKIY2ncYjrk9mGuFbxlepUKApWepbiqCXtZS+PA1KbGYn1hs8Fox0gPOMxxzLxXzKvXdYi5ricW8kdJloVsmp5wcGX0CX+ChTpO52CQ9MvYK/9O9OkMm9tnJ1I+yGQzOoIKXI+xbGGYzv1H02bAfe4e6hiYO140sHNIMYPjYOkf++1pKUa5GnHWb5MNpwllAA5Cx48oAdrtOR+1pG2LrR7pIXWpqUUV3CgNhifrZ45xBP2Iag2Mi6rbMUguVJpyrJCPaYd9DfA0d3azHnKXNK7HIl1Yreh7CHXj560ZINL8bv4/ljHRG5ZwVUup/P8KaP9TDTVBOjeXqzPrSbv0aZ38MWjQb5OwUc9TG6GJ4cv8LtzQ+BakjW0noK8G/aLVs41l42G2r5iS7gwtqv4dHjp6NqZ1s6XjssSgv1COjnzijl+7uSunPcj/ln0MeGYPtnwANbbJq
Third, an example with the mode set to "in-out", which works by itself, but fails to execute the leave hooks when an undefined prop is set:
https://play.vuejs.org/#eNqFVMGO2jAQ/ZWpL0kkGg7tKWJpd1dUalW1VZfbmkM2mRBDsCPboVSIf+/Yhmy6C2wOke158/zGfuM9u23bdNshy9jEFFq0Fgzarp1yKTat0hb2MNe5NMIKJUdQj0BjBQeotNpARJkRl1wWShoL9C89Dm4cKq7yxmByijZqea+kRWnNMf64oCCXVScLn0WIOE3TXC9NAnsuAdwwrZSe5UUdxzRL4GY6ZEq3edNh2namjh+sFnLpUQkRH/7jtn0R8ZFbU51aQh27CQyrDAse5L5dBp0ssRISy2MMYKNKzCAS8r3qbNQvK3mHpBdnJE/H2Bz3Cp+rL3rycSDxqCOSGUKHAcMpdwSlkvia4UUqeFh8luq2IuhlLbkLX5MSivmO+RavFdM4wHmGU+6lYl6kvlnMZS2hmFdShix09WSf3qbBPPAJHus4KsU2GpHb1/iX7tVqcrbLjuZulCwgO4PyBg+wL36YLNxGwXyTcWgoaiWaWNy0TW6RZgCTp85aMuXnohHF+oazYee86yeceTQAuT2sZLDfD9rsQNsQ2zjQBepCUd9KulPIhCHqZ+NzBuOAaTVOiWjYRyslZBxxLqOEaCdjB3E1DHSzEbOGNq/EMl0ZJenN8Hfg5G9a0aD+2bp9DGekMyjnLG8a9eebX3OHerwJyqmxWJ9ZX5mdW+Psl0aDeouc9TFLvY02hGcPP3BH4z5IHdk1hL4S/I1GNV04Cwe7o74m2QOcV/vVv3z0lszNbEfHY05FOaEOGfzEGT1/91dKf5b7If3o88gY7PAPCzW4pA==
What is expected?
Transition should execute all of the javascript hooks and not error.
What is actually happening?
It either errors internally, or doesn't fire hooks at all.
System Info
Any additional comments?
I didn't have any issues up to 3.4.25, but when I updated to 3.4.27 and my custom transition component broke, it led me to investigate the issue, which is actually case 3 (though case 1 works). I worked around that issue by not allowing undocumented props to pass to transition, but issue in case 2 also turned up so I'm reporting that as well.
The text was updated successfully, but these errors were encountered: