Skip to content

Slot children with v-if are inserted in the wrong order under certain conditions #11336

Closed
@basuneko

Description

@basuneko

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

npm run build
npm run preview

Open the app and view the examples.

All cases contain the same set of divs:

<div v-if="showFirstChild">1</div>
<div>2</div>
<div>3</div>

showFirstChild is set to true after a 100ms delay
Screenshot 2024-07-12 at 14 13 32

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

System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M2 Pro
    Memory: 54.47 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nodenv/versions/20.11.1/bin/node
    Yarn: 1.22.22 - ~/.nodenv/versions/20.11.1/bin/yarn
    npm: 10.8.1 - ~/.nodenv/versions/20.11.1/bin/npm
    pnpm: 9.5.0 - ~/.nodenv/versions/20.11.1/bin/pnpm
    Watchman: 2024.06.10.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    vue: ^3.4.31 => 3.4.31

vite 5.3.3
@vitejs/plugin-vue 5.0.5

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions