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

[romanhrynevych]

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

[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 :

😆😘

[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 😆

[romanhrynevych]

@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]

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 😉

[romanhrynevych]

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)

[romanhrynevych]

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

[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 🥲

[sadeghbarati]

shadcn-svelte Context Menu

Context.Menu.-.shadcn-svelte.-.Google.Chrome.2024-01-23.06-27-12.mp4

[KelvinTee58]

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

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

and I also is macos

Screen-2024-05-06-184053.1.mp4

[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.