adobe / adobe/react-spectrum

ComboBox is not selectable on small screen or frame

Open
#7,461 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 screen is not tall enough to fit all options in ComboBox popover it is almost impossible to select value using arrow keys or mouse

### 🤔 Expected Behavior?

Options should be selectable on any screen size

### 😯 Current Behavior

Popover disappear on arrow keys

### 💁 Possible Solution

Potentially will be fixed if https://github.com/adobe/react-spectrum/issues/6760 and/or https://github.com/adobe/react-spectrum/issues/6609 fixed

### 🔦 Context

The problem appears when we have form iframed, it also challenging to select value on landscape mobile as it is hard to scroll list very precisely to not accidentally scroll page and loose popover

### 🖥️ Steps to Reproduce

open https://react-spectrum.adobe.com/react-spectrum/ComboBox.html make screen small (Pixel 7 landscape, this will have issue, but not always, depends on how deep you scroll) or to easier reproduce set screen to 800x250 and open first example using keyboard and try to select the first or the last item.

### Version

1.5

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

Firefox, Chrome

### If other, please specify.

_No response_

### What operating system are you using?

Windows / Android

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue in the ComboBox documentation example at 800x250 or on a Pixel 7 in landscape, using both arrow keys and the mouse. Read the related issues #6760 and #6609 first; done means the popover remains usable and every option can be selected when the available screen height is small.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.