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

[website] Fix modal not being closed with the escape key on the Base UI page #39880

Merged

Conversation

ZeeshanTamboli
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli commented Nov 15, 2023

Fixes #38468

I'm uncertain why the transition property all had an impact on this.

When using transition: all, the document's activeElement is the "View Modal" button when opened. However, with specific transition properties applied, as in this PR, the document's activeElement becomes the Modal when opened allowing the Escape key to close the modal.

While I'm unsure about the reason, it seems to work. I would like to understand why using transition: all didn't maintain focus on the modal for allowing closure with the Escape key, or if there's another reason behind it.

Before: https://mui.com/base-ui/
After: https://deploy-preview-39880--material-ui.netlify.app/base-ui/


Edit: Also see #38255 (comment).

@ZeeshanTamboli ZeeshanTamboli added bug 🐛 Something doesn't work package: base-ui Specific to @mui/base website Pages that are not documentation-related, marketing-focused. labels Nov 15, 2023
@ZeeshanTamboli ZeeshanTamboli changed the title [website]Fix Base UI Modal can't be closed with the Escape key [website] Fix Base UI Modal can't be closed with the Escape key Nov 15, 2023
@mui-bot
Copy link

mui-bot commented Nov 15, 2023

Netlify deploy preview

https://deploy-preview-39880--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against e575294

@ZeeshanTamboli ZeeshanTamboli marked this pull request as ready for review November 15, 2023 07:40
@danilo-leal danilo-leal changed the title [website] Fix Base UI Modal can't be closed with the Escape key [website] Fix modal not being closed with the escape key on the Base UI page Nov 21, 2023
Copy link
Member

@michaldudak michaldudak left a comment

Choose a reason for hiding this comment

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

Good catch! No idea why this works this way either...
Perhaps @siriwatknp would know more about this CSS dark magic.

@ZeeshanTamboli ZeeshanTamboli merged commit ea7caa1 into mui:master Nov 22, 2023
23 checks passed
@ZeeshanTamboli ZeeshanTamboli deleted the issue-38468-base-ui-modal-escape-key branch November 22, 2023 11:42
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Nov 30, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 1, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 1, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 6, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 6, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work package: base-ui Specific to @mui/base website Pages that are not documentation-related, marketing-focused.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[website] Base UI Modal can't be closed with the Escape key
3 participants