Problem with improper event handling of Modal overlay
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Environment
| Operating system | macOS 25.3.0 |
| CPU | Apple M4 (10 cores) |
| Node.js version | v22.18.0 |
| nuxt/cli version | 3.33.1 |
| Package manager | pnpm@10.30.2 |
| Nuxt version | 4.3.1 |
| Nitro version | 2.13.1 |
| Builder | vite@7.3.1 |
| Config | compatibilityDate, css, devtools, modules |
| Modules | @nuxt/content@3.11.2, @nuxt/eslint@1.15.2, @nuxt/image@2.0.0, @nuxt/ui@4.5.0 |
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.5.0
Reproduction
https://codesandbox.io/p/devbox/mutable-snowflake-fy585s
Description
When a Modal contains other custom components with overlays (such as an image previewer), clicking the overlay event will penetrate to the outermost popup overlay, causing the popup containing this component to close.
Ideally, events of a custom mask layer opened inside a Modal should not be captured by the outer mask layer.
Additional context
The issue was discovered when using nuxt-easy-lightbox in the Modal component of NuxtUI; when opening an image previewer in the Modal, its events fail to trigger correctly. Testing revealed that similar image preview components also triggered the same issue.
Logs
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction and inspect Nuxt UI's Modal overlay event handling, focusing on propagation from nested custom overlays such as nuxt-easy-lightbox. Confirm the behavior with another image preview component if needed. Done means clicks on an inner mask trigger its own behavior without closing the containing Modal.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, tailwindcss, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100