You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am using useOverlayPosition to display a non-viewport boundary/container (with same offset and size). Previously, the position works as expected, but in the latest versions, the cross axis offset is wrong.
Bug occurs in react-aria@3.32.0. Also tested with react-aria@3.33.1-nightly.4613.
🤔 Expected Behavior?
Overlay shows up in the boundary
😯 Current Behavior
Overlay shows up outside of the boundary on the cross axis
💁 Possible Solution
I'm fairly confident this bug was caused by #5660.
Specifically, I think there's an incorrect assumption being made, that boundaryStartEdge and boundaryEndEdge are values relative to the visual viewport. In my app, I found that these values are relative to the boundary's offset instead. We have padding 12px and width 300px, so boundaryStartEdge=12 and boundaryEndEdge=288.
Then in the following lines, startEdgeOffset and endEdgeOffset subtract the boundary's cross axis offset. In my app, the boundary/container are the same offset/size and are on the right side of the viewport, so the boundary's cross axis offset was very large (e.g. 800px), resulting in very negative values, like startEdgeOffset=-700 and endEdgeOffset=-600.
Finally, this results in the first if (startEdgeOffset < boundaryStartEdge) branch to evaluate to true, returning a delta of boundaryStartEdge - startEdgeOffset = (12) - (-700) = 712, pushing the overlay far off the boundary.
My guess is, the correct code is to stop subtracting the boundary's cross axis offset. This worked for me, but I'm not sure it works in all cases.
🔦 Context
No response
🖥️ Steps to Reproduce
Sorry I don't have time to set up a minimal test case right now, but I wanted to raise this issue in case others were encountering it since it's tricky to debug.
Version
react-aria@3.32.0, react-aria@3.33.1-nightly.4613
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
MacOS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered:
Thanks for reporting this, will have to revisit that logic. I believe you are right about boundaryStartEdge and boundaryEndEdge, not sure why I didn't do that
Provide a general summary of the issue here
I am using
useOverlayPosition
to display a non-viewport boundary/container (with same offset and size). Previously, the position works as expected, but in the latest versions, the cross axis offset is wrong.Bug occurs in react-aria@3.32.0. Also tested with react-aria@3.33.1-nightly.4613.
🤔 Expected Behavior?
Overlay shows up in the boundary
😯 Current Behavior
Overlay shows up outside of the boundary on the cross axis
💁 Possible Solution
I'm fairly confident this bug was caused by #5660.
Specifically, I think there's an incorrect assumption being made, that
boundaryStartEdge
andboundaryEndEdge
are values relative to the visual viewport. In my app, I found that these values are relative to the boundary's offset instead. We have padding 12px and width 300px, soboundaryStartEdge=12
andboundaryEndEdge=288
.Then in the following lines,
startEdgeOffset
andendEdgeOffset
subtract the boundary's cross axis offset. In my app, the boundary/container are the same offset/size and are on the right side of the viewport, so the boundary's cross axis offset was very large (e.g. 800px), resulting in very negative values, likestartEdgeOffset=-700
andendEdgeOffset=-600
.Finally, this results in the first
if (startEdgeOffset < boundaryStartEdge)
branch to evaluate to true, returning a delta ofboundaryStartEdge - startEdgeOffset = (12) - (-700) = 712
, pushing the overlay far off the boundary.My guess is, the correct code is to stop subtracting the boundary's cross axis offset. This worked for me, but I'm not sure it works in all cases.
🔦 Context
No response
🖥️ Steps to Reproduce
Sorry I don't have time to set up a minimal test case right now, but I wanted to raise this issue in case others were encountering it since it's tricky to debug.
Version
react-aria@3.32.0, react-aria@3.33.1-nightly.4613
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
MacOS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered: