Slot children with v-if are inserted in the wrong order under certain conditions #11336
Labels
🔨 p3-minor-bug
Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
Vue version
3.4.31
Link to minimal reproduction
https://github.com/basuneko/vue-conditional-rendering-bug
Steps to reproduce
Build and preview the app - the issue does not occur when running through the dev server
Open the app and view the examples.
All cases contain the same set of divs:
showFirstChild is set to true after a 100ms delay
What is expected?
After a short delay, the three divs should appear in this order: 1, 2, 3
What is actually happening?
The first example renders 2, 3, 1.
If the timeout is set to 0, the result becomes a bit random - sometimes it renders 1, 2, 3, sometimes 2, 3, 1.
System Info
Any additional comments?
I needed to add a flexbox wrapper to the slot content. It was working fine while running through vite dev server, but then I pushed it to CI...
I don't know what the significance of Vuetify here is but I've only been able to reproduce this with VMenu and VDialog. They render their content outside of the normal component hierarchy. I think they use Teleport but possibly using Teleport? I don't fully understand how they work.
For reference VMenu
The text was updated successfully, but these errors were encountered: