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

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

Closed
basuneko opened this issue Jul 12, 2024 · 2 comments
Closed
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.

Comments

@basuneko
Copy link

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

@edison1105
Copy link
Member

edison1105 commented Jul 12, 2024

maybe duplicate of #7256

It works fine without vuetify, see
Could you provide a minimal reproduction without vuetify?

@yyx990803 yyx990803 added the 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. label Jul 12, 2024
@yyx990803
Copy link
Member

It's related to #10870, I've found the fix. Writing tests now.

@github-actions github-actions bot locked and limited conversation to collaborators Jul 28, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
Projects
None yet
Development

No branches or pull requests

3 participants