Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transition enter-cancelled not called on asynchronous rendering #12091

Open
GarreltMock opened this issue Oct 1, 2024 · 0 comments
Open

Transition enter-cancelled not called on asynchronous rendering #12091

GarreltMock opened this issue Oct 1, 2024 · 0 comments
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working scope: transition

Comments

@GarreltMock
Copy link

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 after leave, although it should not be visible.
To view the correct behaviour you can comment out the according lines in Test.vue like this:

// DOES NOT WORK
//setVisibility(false)

// WORKS
nextTick(() => setVisibility(false))

What is expected?

It is expected that the tooltip is not visible and the order of events for the transitions should look like this:

isVisible: true
"before-enter"
"enter"
isVisible: false
"enter-cancelled"
"before-leave"
"leave"
"after-leave"

What is actually happening?

The tooltip is visible and the transition events look like this:

isVisible: true
"before-enter"
isVisible: false
"before-leave"
"leave"
"enter"
"after-enter"

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 displays true.

@edison1105 edison1105 added 🐞 bug Something isn't working scope: transition has workaround A workaround has been found to avoid the problem labels Oct 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working scope: transition
Projects
None yet
Development

No branches or pull requests

2 participants