[Bug]: [Context Menu] When right-clicking the mouse, the default menu is triggered to be displayed

[pinky-pig]

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
Shadcn 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://www.shadcn-vue.com/docs/components/context-menu

Steps to reproduce

When right-clicking the mouse, the default menu is triggered to be displayed. When the right-click menu of shadcn-vue context-menu is already displayed and you right-click the mouse again, if the mouse right-click is released quickly, the browser's default menu will be triggered.

Describe the bug

After investigation, it was found that the default animation time of data-[state=closed] in shadcn-vue context-menu is 0.15s. If the context-menu is already open, when right-clicking again, the old context-menu will first close, requiring a 0.15s animation time, and then the new context-menu will be opened. However, if the mouse right-click is released within 0.15s, the browser's default context-menu will be triggered.

Expected behavior

Perhaps it may not be a bug, but it still took me half an hour to find the reason. Possible optimizations include: 1. Reduce the animation time for "close," for example, I set it to 0.05, which works fine. 2. When opening, obtain information using document.getAnimations. If I am causing any disturbance, please forgive my presumption.

Conext & Screenshots (if applicable)

No response

[hrynevychroman]

I don't think this is a bug, for example if you right click on YouTube video, there is custom context menu shown, but when you clicked one more time, it will show you default one. I think this is because of accessibility, @zernonia sorry for tag, but need some final thought from you 🙂

Attached some screenshots, don't look at text, it's my native language (ukrainian) 😁

For example on native context menu you can turn on (Picture in Picture) Arc feature, but YouTube don't give that option)

[pinky-pig]

It's not a bug to have the default menu appear again after the custom menu has already appeared😆

However, the issue here is that, after the appearance of the custom menu, right-clicking elsewhere may not always yield the same result. It's possible to get the default menu or the custom menu at a new location. The reason for this behavior is as described in the bug description above and depends on the time gap between right-clicking down and releasing.

Even with a repeated right-click, the outcome may vary, which can be confusing😂

After a custom menu has appeared, if you right-click and hold without releasing until the custom menu closes, and then release the right mouse button after the closing animation is complete, the new custom menu will appear in a new location. This is expected behavior. However, if the right mouse button is released while the closing animation of the previous custom menu is still ongoing, the new custom menu will not appear in a new location; instead, the default menu will appear.

In essence, the problem lies in the relationship between the opening of a new menu and the closing animation of the previous one.

the release time > closing duration :

the release time < closing duration :

Youtube contextmenu :

😆😘

[hrynevychroman]

Thanks for more details, I will try to watch and make a PR if find something ☺️

[hrynevychroman]

Need someone with Windows system, everything works fine on MacOS, can't reproduce it at all 😢

[pinky-pig]

I also cannot reproduce it on macOS indeed 🤣 And I have a Windows computer, and I'm willing to do whatever you need 😆

[hrynevychroman]

@pinky-pig Hello 👋

Can you try to reproduce this bug on main radix-vue website? Look through code and think this issue is more to Radix-vue codebase, because here used all components from there, just added some styling)

btw, on main website there is no (default contextmenu) always opened custom one 🤔

[sadeghbarati]

Yes If I hit right click fast on that spot

[pinky-pig]

I couldn't reproduce this bug on the radix-vue website, so I raised the issue here 🤣 Look through code, I initially thought the bug was caused by the 'data-[state=closed]' animate-out animation in shadcn-vue. But I haven't verified it yet 🥲

[pinky-pig]

It seems that when I use a relatively small duration for the 'data-[state=closed]' animation, the custom menu keeps appearing.

🤣🤣

[pinky-pig]

Now I have verified my hypothesis 😆

As mentioned above, the issue of having two possible outcomes when right-clicking on Windows is due to the 'data-[state=open]' and 'data-[state=closed]' animations.

This situation did not occur on the radix-vue website example but did occur on the shadcn-vue website example. The difference between the two is the style animations.

I demonstrated this in the GIF below. With just the addition of two animations, the example from radix-vue, which originally did not have this bug on StackBlitz, exhibited an anomaly. (For the sake of demonstration, the duration here is set to 0.3s, whereas in shadcn-vue, it is 0.15s, which also causes this issue)

The code in the GIF

In conclusion, because shadcn-vue only added some styles to radix-vue, the simplest way to address this issue is to minimize the duration of data-[state=closed] or remove the animation effect. Certainly, how to resolve this issue may need to be decided by shadcn-vue core members.

Thanks for the open-source contribution😘. If there is a need for me to submit a pull request, I am also willing to do so 😉

[sadeghbarati]

shadcn-svelte Context Menu

https://github.com/radix-vue/shadcn-vue/assets/17789047/c60c3e92-7e51-4025-8a08-765d28fb4502

[KelvinTee58]

你好，兄弟，我也出现这个问题了，你是把动画删掉就能解决问题了吗？

Hello brother, I also have this problem. Can you solve the problem by deleting the animation css?

and I also is macos

https://github.com/radix-vue/shadcn-vue/assets/32637205/3ab896b1-60ba-4389-a66b-6258cf0f4071

[KelvinTee58]

I got it. I just deleted the css " data-[state=closed]:animate-out " attribute in the "ContextMenuContent.vue" file and it works. I hope it works for you.

[brokuka]

any updates ?