Transition enter-cancelled not called on asynchronous rendering #12091
Labels
has workaround
A workaround has been found to avoid the problem
🐞 bug
Something isn't working
scope: transition
Vue version
3.5.10
Link to minimal reproduction
https://play.vuejs.org/#eNqNVUtv2zAM/iuCL0mwxs7Q9ZIlRbehh23AOrTFdjEwqA6dqpUlQ5LdFEH++yjJz0B9+GSRHynyEx/76EtZxnUF0TJa6Uyx0hANpirPU8GKUipD9kRBTg4kV7IgE4ROOtWtlNywslHFSXO2/gYg0KZH4KFRpyKTAlX6Xj6Rtb1kmlOuYZYKjOCWFSArM53OyPqcTC0orimvAKFGVTBD2CrxEWOseDBQlJwawBMhqw2rST1n+TqNrG0aOTEq2piTTmDj86dVgmb4t0o6Z9FJNMjqmCXCqdjiFUa7CzrGKg3tPS1xcdILY6N7fvbkiZrs/jLPITMnAbJbovaE6T9MszsOiFgPLpkiGQMnDWnWSnKIudxO06izXZI0Ih96X57WN/hEboyiQjPDJCqtwH6CFoDp07IEqtKoVzSS7nxxB7lUMAdhQKHFMLbJUDeZDd1cBPEhIM1RFnY/UIW8zzMqMuAcNsF7evWRcRM1B1pbDkIZOd2RWRAfAvqwg/CBKuT95YyO1L1x88juoQet0xVJ1z/t15Y306Ru62o/qtDDwGXTV/6/L6Rxq7mq0+YZjXUmS9igJPaF5F9vTjPDaiB776n3sySypBkzz+RssSg0AarB/35OBcYx9uJ6q/HR2C3JwiOxBWwAeDM2vsEwRM628YOWAlvf2VhGi5JxUFelvRs7HzP33rATOJdPP5zMTqmTVp7dQ/YYkD/onZWl0W8FGlSNRHc6Q9UWjFdf3vyCHf53ykJuKvssryivAR++cg3rYF8rscGwBzgX7Xc3hpjY3urLnQGktEnKBmqRB4dPI5xG315JvQ/3NP7k7JBRZHE09pDFV9ZKO+n6KvJ7wQ18q4ads80rgZUgxWgEtpEoHMxKtCf74ah2/hh3Tz3tCvYObYEKNy0HePsdjUcMpLHqYZ6XI7gX2dRdCbX77r2LAzPE1Zc9hvftm4tlglXcr4tR3oGV4RZtj+jWb5KQv1fXP2+WXTjNRgnBX94bo9ZGLv7VoGxxIRen8Vn8cREd/gNjPtMc
Steps to reproduce
Render two components asynchronously after a short timeout.
The first component adds a tooltip with a transition. It is visible at first.
The second component then sets the visibility of the tooltip (via composable) to false.
If this action is not done with a
nextTick
the tooltip is still visible.In the reproduction link the bug happens immediately, since it is caused by the transition.
The tooltip should not be visible at all.
The wrong behaviour can be viewed in the console.log. The
enter
is called afterleave
, although it should not be visible.To view the correct behaviour you can comment out the according lines in Test.vue like this:
What is expected?
It is expected that the tooltip is not visible and the order of events for the transitions should look like this:
What is actually happening?
The tooltip is visible and the transition events look like this:
System Info
No response
Any additional comments?
It is also notable that the template of the tooltip is not reactive anymore.
Even though the watchEffect logs
isVisible: false
, the template still displaystrue
.The text was updated successfully, but these errors were encountered: