Description
Environment
Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Reka UI version: 2.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212Link to minimal reproduction
https://stackblitz.com/edit/e4r1j4vf?file=src%2FApp.vue
Steps to reproduce
- Go to the reproduction link
- Right click on the first ContextMenu trigger zone to open the context menu
- Left click on one of the trigger zones
Describe the bug
When a ContextMenu is opened, the <body> element receives pointer-events: none to disable interactions with the rest of the UI. However, each trigger element gets a hardcoded style="pointer-events: auto" applied, which overrides this and allows interactions to still occur on the trigger.
This becomes problematic when the trigger element supports both left-click and right-click actions. For example, in a list of cards:
- Left-click navigates to another route
- Right-click opens the context menu
Since the trigger element continues to receive pointer events, users may inadvertently left-click and navigate away, rather than dismissing the context menu as intended.
Expected behavior
Trigger elements should respect the global pointer-events: none when a context menu is open, to prevent unintended interactions.
Context & Screenshots (if applicable)
No response