react-spectrum
react-spectrum copied to clipboard
adobe
Popover arrow missplacend in certain conditions
🐛 Bug Report
When the trigger button is close to the bottom edge of the page, the popup will not render correctly. It starts collapsing and also tip gets miss-aligned
🤔 Expected Behavior
Tip should not be miss-aligned and should be stick to popover dialog
😯 Current Behavior
Getting miss-aligned
💻 Code Sample
🌍 Your Environment
https://codesandbox.io/s/dawn-breeze-3d6er
| Software | Version(s) |
|---|---|
| react-spectrum | 3.10.0 |
| Browser | Chrome, Safari, Firefox |
| Operating System | Mac |
🧢 Your Company/Team
Working with Adobe Color Team
🕷 Tracking Issue (optional)
Mind adding some screenshots of what you are seeing? Is this the issue you are talking about?
Rectangle area with green border is a trigger button (also tip is pointing to it only).
I see, I'm not sure how much we can do here since we need the tip to be positioned next to the button but at the same time we don't want the popover to partially render out of view. I'll bring it up with the team.
Talked with the team, perhaps we could add some additional logic for changing the popover positioning when this happens or adjust the boundary of the popover, will need some investigation.
We will investigate shifting the popover arrow automatically in cases like this and look into refining the overlay positioning code.
After reviewing the two exploration PRs above and a third party solution with Spectrum we've decided to reduce padding to 6px when the trigger is at a boundary. For the extreme cases when the trigger is at the boundary and the arrow can not point at the trigger and remain nicely connected to the popover, the arrow will be removed.
Reopening since there is some additional refinement required, PR for tracking: https://github.com/adobe/react-spectrum/pull/3454