react-spectrum
react-spectrum copied to clipboard
adobe
Click event on underlay closes the select + dialog and triggers a link behind it
Provide a general summary of the issue here
When clicking on an underlay (a div with position: fixed), it closes the select as expected, but it also triggers any link that is positioned behind the underlay.
🤔 Expected Behavior?
Clicking anywhere on the underlay should only close the select and not trigger any links or other elements behind it.
😯 Current Behavior
Currently, when clicking on the underlay in an area where there is a link behind it, the select closes as expected, but the link behind the underlay also gets triggered. The link should not be clickable in this case.
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
https://github.com/user-attachments/assets/8a50cb96-b8a4-4863-beba-44463f70a25a
Version
1.3.3
What browsers are you seeing the problem on?
Chrome (129.0.6668.70, Responsive Viewport Mode, Type: Mobile (with touch)), Microsoft Edge (129.0.2792.65, Responsive Viewport Mode, Type: Mobile (with touch)), Firefox (130.0.1, Responsive Design Mode, Touch simulation), Safari (iOS 18)
If other, please specify.
No response
What operating system are you using?
macOS Sequoia
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
I'm only seeing this in Chrome's Simulated Device mode. Are you observing this in all the browsers mentioned? Also note that https://github.com/adobe/react-spectrum/pull/7026 will be included in the next release, not sure if that is related.
@reidbarber I built the project locally considering #7026, but the bug is still present. As far as I can tell, this PR is not related to useOverlay.
I think the issue occurs in all browsers, for example, in Safari on iOS 18:
https://github.com/user-attachments/assets/8a9bf24a-5d5b-4aa0-9125-728040d7692f
Interesting, I'm not observing this in Chrome, Safari, or Firefox on Mac OS 14.6.1.
https://github.com/user-attachments/assets/b122a337-7700-4056-95f1-696c199d3301
@reidbarber this problem is not reproduced if you go to chrome responsive mode and select mobile type to emulate touch actions?
This issue listed Firefox, Chrome, Safari, and Microsoft Edge under 'What browsers are you seeing this on?', so I was confirming if it was present in those since I didn't see it in those without turning on simulated device mode.
I'm seeing this same thing, click is properly captured but touch events click the link underneath. Chrome in responsive mode and especially safari
I'm seeing similar results when selecting an item: it selects an item AND clicks an item directly underneath. Only reproducible on a touchscreen device.
See https://github.com/adobe/react-spectrum/issues/7283#issuecomment-2557931692
