mui / mui/base-ui

[dialog] OnClick event from wrapper is fired when clicking inside Dialog

Open
#2,312 2 comments 1 reaction 0 assignees View on GitHub
component: alert dialog component: 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.