[dialog] OnClick event from wrapper is fired when clicking inside Dialog
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 2d 1h
- Merged PRs (30d)
- 114
Description
# Bug report
## Current behavior
In our current app we have a timeline message that is wrapped in a div element that contains an onClick to open our message dialog. Within this timeline message, we also have buttons that can open other dialogs such as 1 to see the people that liked the message. With this setup though, were encountering an issue that when you click on one of the buttons to open let's say the Likes dialog after clicking within that dialog, the onClick from the wrapping element is fired and it opens the message Dialog.
It seems to also happen when we wrap the timeline message in an `` tag, and the link is opened after clicking inside of the Likes dialog. Using the `ESC` seems to work fine, it's just clicks
## Expected behavior
The `onClick` from the wrapping element should not be fired anymore.
## Reproducible example
https://codesandbox.io/p/sandbox/twilight-worker-fyr52x
## Base UI version
Latest version
## Which browser are you using?
FireFox
## Which OS are you using?
Mac OS
## Additional context
Since Base-UI uses Floating-UI, I also opened a issue on their Github
https://github.com/floating-ui/floating-ui/issues/3363
Contributor guide
Research direction
Start with the CodeSandbox reproducible example and review the linked Floating-UI issue to understand the click propagation behavior. The payload does not identify a repository file or test, so locate the Dialog event-handling entry point and reproduce the Firefox case first. Done means clicks inside the Dialog no longer trigger the wrapping onClick or link, while Escape continues to work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100