[Dialog] body pointer-events: none remains after closing
See original GitHub issueBug report
Current Behavior
With Dialog version 0.1.7 the pointer-events seems to remain on the body with the Chrome device emulator using a mobile device (e.g. iPad Air), while in the 0.1.6 it works fine.
Expected behavior
The pointer-events should always be removed from the body after the closing animation has finished.
Reproducible example
The 2 repos are identical, except the @radix-ui/react-dialog version:
Additional context
I forked the radix-ui/design-system repo on codesandbox to reproduce this bug keeping the original code but changing just the version of the @radix-ui/react-dialog.
Note: In the version 0.1.7, the problem should be solved by removing the close animation from the Content
Issue Analytics
- State:
- Created 2 years ago
- Reactions:10
- Comments:31
Top Results From Across the Web
pointer-events - CSS: Cascading Style Sheets - MDN Web Docs
Elements with pointer-events: none will still receive focus through sequential keyboard navigation using the Tab key.
Read more >How to disable background when modal window pops up
The key idea is to have pointer-events: none; for the body when modal is open. ... In the example you can click both...
Read more >Building a dialog component - web.dev
When the close button is pressed, focus is restored to the button that opened it. With the dialog element, this is built-in default...
Read more >Some areas inside the Vuetify Dialog box don't close it even if ...
Problem 2: "areas where clicking should close the dialog, but don't". You can use pointer-events: none on the dialog body to disable click...
Read more >Releases - Radix UI
Dropdown Menu · Improve composability with Dialog – #818 · Re-enable pointer-events when closed – #819 · Prevent body text from selecting on...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yeah it’s probably due to version mismatch. Unfortunately with independent versioning one thing that is tricky to do is to coordinate changes across dependencies. In this case both of these packages use a common package to deal with the layering, and if you use a version of each package which depends on a different version of that common dep, it will break.
So yeah the general advice we give so far for those is to ensure you are always using the latest version of each primitive.
Chiming in to say that our team ran into this issue too. We had upgraded
@radix-ui/react-dropdown-menuto the latest version at the prompting of a dependabot PR, but noticed thepointer-events: nonestyle rule stuck around after closing a dialog opened by the dropdown menu.Upgrading all our components to the latest version fixed this issue. I suspect this is because differing versions of some underlying library (eg.
@radix-ui/react-dismissable-layer) didn’t play well with each other. If that is the case, it’d be nice to have some version check in development when multiple versions of a sub-dependency are present. I’m happy to file a separate issue for that if needed.