adobe / adobe/react-spectrum

useOverlayPosition regression for non-viewport boundary/container

Open
#6,333 8 comments 1 reaction 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### 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 https://github.com/adobe/react-spectrum/pull/5660.

Specifically, I think there's an [incorrect assumption](https://github.com/adobe/react-spectrum/blob/cf0846eb49fcdde669e9dc4c0c2d2109b50e46dd/packages/%40react-aria/overlays/src/calculatePosition.ts#L181) 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.