search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.53k stars 1.08k forks source link

DatePicker and DateRangePicker Overlay opens too far above label #2816

Closed ktabors closed 2 weeks ago

ktabors commented 2 years ago

🐛 Bug Report

On iPad when DateRangePicker and DatePicker opens the calendar above the picker's input field, there is extra padding, like 75x instead of being just above the label. DatePicker does this too. Sometimes it opens above with ~20px, but closing, scrolling, and reopening will cause it more in the 75px range.

🤔 Expected Behavior

When the calendar selector overlay opens above the input field it should be about 15px above it, just above the label. See a desktop browser like Chrome on OSX for the correct positioning.

😯 Current Behavior

When the calendar selector overlay opens above the input field it is positioned more in the 40px to 100px range on an iPad.

image

🔦 Context

Found while testing the new DateRangePicker docs. There was concern that it was related to a width and scrolling issues, but it isn't because there is no horizontal scroll on iPad. I also tested this with the first draft of the horizontal scrolling fix and the issue persisted.

🌍 Your Environment

Software Version(s)
react-spectrum master
Browser Safari
Operating System iOS iPad

🧢 Your Company/Team

RSP

devongovett commented 2 years ago

Appears to actually be an issue with popover positioning code. I can reproduce on the DialogTrigger docs as well. Seems to be related to whether the Safari address bar is visible or collapsed. When collapsed, positioning is wrong. If you tap on it to show it again, then it is correct. Guessing we need to do something with the visual viewport there.

ktabors commented 2 weeks ago

No longer able to reproduce.