Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[Dialog] Expected clickable elements behind overlay not to trigger on clickOutside in mobile mode.
See original GitHub issueBug report
When using a portalled dialog, I was expecting elements not to be clickable underneath the overlay.
I was having trouble fixing it until I set the body to be:
<body style={{ pointerEvents: 'auto' }}>
Now it works like I anticipated.
Current Behavior
Clicking elements under a Dialog.Overlay are triggered.
Expected behavior
Elements under a Dialog.Overlay should not be clickable until Dialog is closed.
Reproducible example
- Click ‘Edit profile’
- Click ‘Show Code’ underneath overlay.
- Observe that button was clicked and now says ‘Hide code’
Suggested solution
Not sure, but something is messing with pointerEvents on the body which is causing this.
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Radix Package(s) | react-dialog | 0.1.7 |
| React | n/a | 17.0.2 |
| Browser | Chrome | |
| Assistive tech | ||
| Node | n/a | |
| npm/yarn | ||
| Operating System |
Issue Analytics
- State:
- Created a year ago
- Reactions:3
- Comments:5
Top Results From Across the Web
HTML "overlay" which allows clicks to fall through to elements ...
A silly hack I did was to set the height of the element to zero but overflow:visible; combining this with pointer-events:none; seems to...
Read more >Click outside directive - Vuetify
The v-click-outside directive allows you to provide a handler to be invoked when the user clicks outside of the target element.
Read more >Element is not clickable due to another element that would ...
The error occurs when: You trigger the dialog to close; The overlay does not immediately disappear – eg there is some Ajax communication ......
Read more >Controlling tooltips & pop-up menus with components in React
Although I call it tooltip, it can be anything that you want to display when an element inside the DOM is interacted with...
Read more >how to prevent mat dialog close on click outside - You.com
5. By default, you could close a material dialog box by clicking outside dialog box element or by pressing the esape key. However,...
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
I can confirm this is still an issue in
mainin any condition (animation or not) but is linked to touch as per the issue. Looking into it.Yeah seems that way, tried it on my mobile, happens there, also in responsive mode on Chrome dev tools.