mui / mui/base-ui

[dialog] Click events on backdrop not dismissing popup when portal container is ShadowRoot

Open
#2,867 2 comments 1 reaction 0 assignees View on GitHub
component: dialog type: bug
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Bug report

## Current behavior

> [!NOTE]
> Update: atomiks points out that this issue is only occurring in the CodeSandbox demo when it's inside an iframe, and not when it's on an isolated page (e.g. https://hk5xwc.csb.app/)

When rendering a dialog with a Dialog.Portal container that is in a Web Component (ShadowRoot) I can't get the dialog to dismiss by clicking outside of the Dialog.Popover. (i.e. on the Dialog.Backdrop).

## Expected behavior

The [docs](https://base-ui.com/react/components/dialog#root) say that the default behaviour is "dialog should close on outside clicks".

## Reproducible example

[CodeSandbox demo](https://codesandbox.io/p/devbox/gifted-worker-hk5xwc?workspaceId=ws_HfVA1FkwYpfsoasrPxSkB7)

## Base UI version

Latest (1.0.0-beta.3)

## Which browser are you using?

Chrome

## Which OS are you using?

Mac OS.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.