adobe / adobe/react-spectrum

useOverlayPosition: user-defined maxHeight is ignored when userSetMaxHeight < maxHeight

Open
#4,474 3 comments 0 reactions 0 assignees View on GitHub
Overlay Positioning Overlays
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🙋 Feature Request

I'm working on integrating react-aria into out existing project.

I'm looking for some motivation beneath this decision: https://github.com/adobe/react-spectrum/issues/1500#issuecomment-784033555

It's a common behaviour for us to let users scroll the page if the dropdown with e.g min-height: 300px can't be rendered into viewport. But calculated max-height seems to crop the popup/dropdown to fit the screen.

Although it can be solved either with setting maxHeight bigger that calculated or deleting max-height property from returned styles object, it can't be done that way because of this line: https://github.com/adobe/react-spectrum/blob/273e828cd17c3d229e8ab10ce62bd0a6f0f43963/packages/%40react-aria/overlays/src/useOverlayPosition.ts#L149

Is there any motivation beneath this decision that I'm not taking into consideration. Or can we somehow patch this place (e.g when maxHeight=null or smth like that) to handle this case?

I'm ready to submit a PR but wondering what way is preferred to handle it

–––
Another dirty dirty hack to overcome this problem is to set `maxHeight: -Infinity`

Contributor guide

Open the contributing guide

Research direction

Start with packages/@react-aria/overlays/src/useOverlayPosition.ts at the behavior around line 149, then read the linked issue for the motivation behind the current decision. Determine the preferred handling when a user-defined maxHeight is smaller than the calculated value, and confirm the resulting overlay sizing behavior before adding coverage for the chosen approach.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.