Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dialogs] Support multiple non-nested modal backdrops #1327

Open
wants to merge 7 commits into
base: master
Choose a base branch
from

Conversation

atomiks
Copy link
Contributor

@atomiks atomiks commented Jan 12, 2025

This detects if the click occurred on the dialog's owning backdrop. This ensures dialogs that opened previously but aren't nested in the React tree won't close. This fixes bugs related to multiple "unrelated" dialogs that open independently without using any kind of Provider.

Note: non-nested dialogs don't support CSS variables or limiting to only one (topmost) backdrop as that requires context/React tree nesting. I figure that feature is usually useful for closely related dialogs that will be nested in the React tree anyway.

Closes #1320

@atomiks atomiks added component: alert dialog This is the name of the generic UI component, not the React module! component: dialog This is the name of the generic UI component, not the React module! labels Jan 12, 2025
@atomiks atomiks marked this pull request as ready for review January 13, 2025 00:16
Copy link

netlify bot commented Jan 14, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 2fc8ec9
🔍 Latest deploy log https://app.netlify.com/sites/base-ui/deploys/6785c80785c9e900081ef047
😎 Deploy Preview https://deploy-preview-1327--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Jan 14, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit cfe36e3
🔍 Latest deploy log https://app.netlify.com/sites/base-ui/deploys/6785c83b65892b00089c0806
😎 Deploy Preview https://deploy-preview-1327--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: alert dialog This is the name of the generic UI component, not the React module! component: dialog This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Dialog] Support non-nested modal dialogs
1 participant