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.

Sign up for GitHub

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

Jump to bottom

[Menu, Select, Dialog] Use internal backdrop for pointer modality #1161

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

[Menu, Select, Dialog] Use internal backdrop for pointer modality #1161

wants to merge 9 commits into from

Conversation

atomiks
Copy link
Contributor

@atomiks atomiks commented Dec 18, 2024 •
edited
Loading

Closes #1119
Also looks to close #1107 demo

  1. pointer-events: none on "outside" elements causes perf issues in Firefox and Safari, degrading increasingly worse as the page size increases.

  2. pointer-events: none with an auto "hole" on the popup isn't feasible due to interop issues with other popups (extensions, other libraries or custom elements) as they will be unusable since they don't know to specify auto.

The main issue with an internal backdrop is z-index layering. With Set up portals in our docs, this issue is essentially gone as the portaled backdrop will always cover the isolated root content.

@atomiks atomiks added component: select This is the name of the generic UI component, not the React module! component: menu This is the name of the generic UI component, not the React module! 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 Dec 18, 2024
@mui-bot
Copy link

mui-bot commented Dec 18, 2024 •
edited
Loading

Netlify deploy preview

https://deploy-preview-1161--base-ui.netlify.app/

Generated by 🚫 dangerJS against 6eb705d

@mj12albert mj12albert linked an issue Dec 18, 2024 that may be closed by this pull request
[popups] Clicking outside of nested popups closes all of them #1107
Open
mnajdova
mnajdova reviewed Dec 18, 2024
View reviewed changes
Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The direction makes sense to me. Just to make sure, will we still have the *Dialog exported components so people can style their backdrops?

@atomiks
Copy link
Contributor Author

atomiks commented Dec 18, 2024

will we still have the *Dialog exported components so people can style their backdrops?

The Backdrop parts are meant to be visual-only for the purposes of dimming the background and such, so Dialog.Backdrop etc still exist

@mnajdova
Copy link
Member

are meant to be visual-only for the purposes of dimming the background and such, so Dialog.Backdrop etc still exist

Makes total sense, this is what I wanted to confirm 👌

@colmtuite colmtuite requested a review from vladmoroz December 18, 2024 15:54
@atomiks atomiks force-pushed the fix/internal-backdrop branch from d4ceac9 to f832acd Compare December 19, 2024 02:50
@atomiks atomiks marked this pull request as ready for review December 19, 2024 03:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mnajdova mnajdova mnajdova left review comments

@vladmoroz vladmoroz Awaiting requested review from vladmoroz

@colmtuite colmtuite Awaiting requested review from colmtuite colmtuite is a code owner

@michaldudak michaldudak Awaiting requested review from michaldudak michaldudak is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
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! component: menu This is the name of the generic UI component, not the React module! component: select This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[menu] Highlight is slow [popups] Clicking outside of nested popups closes all of them
3 participants
@atomiks @mui-bot @mnajdova