Clicks go through the calendar to underlying elements on mobile phones

heisand commented 1 year ago

🐛 Bug Report

Provide a general summary of the issue here

When using a mobile phone and clicking on a date in the useDatePicker's calendar, the click goes through to the underlying element.

🤔 Expected Behavior?

I expect that a click on a date will not activate an element which lies under the calendar.

😯 Current Behavior

Clicking a date on mobile phones will activate any elements that lie under the calendar. If this is e.g. a link, then suddenly you navigate to a different page. It should be mentioned that this happens also when the date picker is not portalled.

Attaching a screen recording to illustrate the problem: https://github.com/adobe/react-spectrum/assets/15145686/2b3c3e96-31e7-4ac3-8a25-a900f430a838

💁 Possible Solution

Why does this happen and can it be fixed? Or is there a possible workaround for users of the library? I also belive that this happens for the useComboBox/useListBox as well.

🔦 Context

I am trying to create an accessible date picker for a large group of users.

🖥️ Steps to Reproduce

Go to https://codesandbox.io/s/reverent-faraday-5nwk87 (use a responsive/device mode in the browser)

Add

<p style={{marginTop: "215px"}}>
<a href="https://www.thesun.co.uk">Click here</a>  
</p>

between the DatePicker and the DateRangePicker

Find september 11 2023 and press it (which will take you to thesun.co.uk)

Version

3.27.0 (and 3.21.0)

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge, Other

If other, please specify.

No response

What operating system are you using?

Android, iPhone, MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

reidbarber commented 1 year ago

heisand commented 1 year ago

Related to #4480, #1513

Thanks for linking.

It works until further using the workaround from https://github.com/adobe/react-spectrum/issues/1513 👍

adobe / react-spectrum