adobe / adobe/react-spectrum

Select/ComboBox: popover container padding takes priority over trigger alignment

Open
#8,918 1 comment 0 reactions 0 assignees View on GitHub
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

When a `Select` or `ComboBox` is placed such that the distance to the edge of the viewport is smaller than `Popover`'s `containerPadding`, the list of items becomes misaligned with the rest of the select/combobox.

### 🤔 Expected Behavior?

In the case of Select and ComboBox, the list of items should always be aligned with its trigger.

### 😯 Current Behavior

The list of items becomes misaligned.

### 💁 Possible Solution

This is caused by the `containerPadding` value on `Popover`, which seems to take precedence over aligning with the trigger. This is fine for a standalone Popover, but in case of Select/ComboBox aligning the list with the trigger should take precedence, and `containerPadding` should only be applied in the block axis.

### 🔦 Context

I'm maintaining an internal component library that builds on React Aria. We received a report that ComboBox list becomes misaligned when displayed on a device with a very small viewport.

### 🖥️ Steps to Reproduce

https://stackblitz.com/edit/gka2mrny?file=src%2FApp.tsx

### Version

`react-aria-components` 1.12.2

### What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

### If other, please specify.

_No response_

### What operating system are you using?

Windows 11

### 🧢 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.