Click event on underlay closes the select + dialog and triggers a link behind it

[maximpostnikov]

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

[reidbarber]

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.

[maximpostnikov]

@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

[reidbarber]

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

[maximpostnikov]

@reidbarber this problem is not reproduced if you go to chrome responsive mode and select mobile type to emulate touch actions?

[reidbarber]

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.

[scttcper]

I'm seeing this same thing, click is properly captured but touch events click the link underneath. Chrome in responsive mode and especially safari