search

unovue / radix-vue

Vue port of Radix UI Primitives. An open-source UI component library for building high-quality, accessible design systems and web apps.
https://radix-vue.com
MIT License
3.73k stars 233 forks source link

[Bug]: Vue Transition group doesn't work properly when triggered from inside the modal context. #613

Open cory-glooh opened 10 months ago

cory-glooh commented 10 months ago

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://codesandbox.io/p/devbox/radix-vue-tabs-forked-kr8yvk

Steps to reproduce

Right click the items and remove, compare it to pressing the red X

Describe the bug

When you trigger the remove event from inside the context of a modal, the items below won't transition up. selecting the red X button, they do. (outside the modal).

Expected behavior

Animation/transitions should work as expected.

Context & Screenshots (if applicable)

No response

zernonia commented 10 months ago

Thanks for the issue @cory-glooh ! This issue seems abit tricky.. whereby the list-move class were not added during the transition. Could be some DOM update overwriting the instance where Vue apply the transition class.

zernonia commented 9 months ago

Yo @cory-glooh .. Realised that is the pointerEvent assigned to body was causing the transition to break. You can try <ContextMenuRoot :modal="false"> and it should now transition smoothly.

However that will now allow user to click the content outside of the ContextMenu.