Skip to content

Many issues with Transition since 3.4.26 #11061

Closed
@nborko

Description

@nborko

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

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 12.62 GB / 31.81 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.7 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (125.0.2535.79)
    Internet Explorer: 11.0.22621.3527

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    ❗ p4-importantPriority 4: this fixes bugs that violate documented behavior, or significantly improves perf.regressionscope: transition

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions