Skip to content

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

Merged
atomiks merged 14 commits into
mui:masterfrom
atomiks:fix/internal-backdrop
Dec 23, 2024
Merged

[Menu, Select, Dialog] Use internal backdrop for pointer modality#1161
atomiks merged 14 commits into
mui:masterfrom
atomiks:fix/internal-backdrop

Conversation

@atomiks

@atomiks atomiks commented Dec 18, 2024

Copy link
Copy Markdown
Contributor

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 Changes related to the select component. component: menu Changes related to the menu component. component: alert dialog Changes related to the alert dialog component. component: dialog Changes related to the dialog component. labels Dec 18, 2024
@mui-bot

mui-bot commented Dec 18, 2024

Copy link
Copy Markdown

Netlify deploy preview

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

Generated by 🚫 dangerJS against 7f2a3fb

@mj12albert mj12albert linked an issue Dec 18, 2024 that may be closed by this pull request

@mnajdova mnajdova left a comment

Copy link
Copy Markdown
Member

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

atomiks commented Dec 18, 2024

Copy link
Copy Markdown
Contributor Author

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
Copy Markdown
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
Comment thread packages/react/src/dialog/root/DialogRoot.test.tsx
@atomiks atomiks merged commit e014564 into mui:master Dec 23, 2024
@atomiks atomiks deleted the fix/internal-backdrop branch December 23, 2024 10:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: alert dialog Changes related to the alert dialog component. component: dialog Changes related to the dialog component. component: menu Changes related to the menu component. component: select Changes related to the select component.

Projects

None yet

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