nuxt
Opened USelect triggers background elements on hover
Environment
- Operating System: Darwin
- Node Version: v22.16.0
- Nuxt Version: 4.1.3
- CLI Version: 3.29.3
- Nitro Version: 2.12.7
- Package Manager: [email protected]
- Builder: -
- User Config: sourcemap, ssr, devtools, app, modules, srcDir, serverDir, compatibilityDate, devServer, nitro, vite, sentry, routeRules, css, colorMode, eslint, icon
- Runtime Modules: @sentry/nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @vueuse/[email protected]
- Build Modules: -
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.0.1
Reproduction
https://codesandbox.io/p/devbox/serene-http-7p37qq?workspaceId=ws_5s171GS7Kawcz7J9iRt3Xa
Description
When opening a Select, I can hover and click elements that are in a ContextMenu.
In my example, you can open the Popover, which will place a panel with a Select on top of a ContextMenu area. Then open the Select and see how the ContextMenu child reacts to the cursor, but it shouldn't. Removing the ContextMenu in my example fixes the issue, the cursor no longer has effect on background elements while the Select is open.
Additional context
https://github.com/user-attachments/assets/e437c03e-7405-4a8a-9266-a8d083d6f97d
Logs
After some digging, it might be an upstream issue.
IMO it could be related to a Reka issue (https://github.com/unovue/reka-ui/issues/1923) which sets pointer-events: auto on its ContextMenu. Removing this prop from the ContextMenu in my DOM fixes my issue.