adobe / adobe/react-spectrum

Scroll issue when using keyboard in a fix height list

Open
#6,492 3 comments 1 reaction 0 assignees View on GitHub
bug needs investigation
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

Using GridList with a max-height, when using a keyboard to drag and drop, tabbing to a drop indicator that is out of view does not scroll the Gridlist.

![image](https://github.com/adobe/react-spectrum/assets/167082725/e45f75e4-a609-4d5e-af0a-27b912ac7ea4)

![image](https://github.com/adobe/react-spectrum/assets/167082725/29e8675a-6a63-4420-8b11-2a34166a9481)

### 🤔 Expected Behavior?

The Gridlist should scroll into view the drop indicator.

### 😯 Current Behavior

The Gridlist does not scroll into view the drop indicator.

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

Give a gridlist a max-height

### Version

"react-aria-components": "^1.1.1"

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

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

Windows

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue in a react-aria-components GridList with a max-height, using Chrome and keyboard drag-and-drop. Trace the GridList keyboard interaction and drop-indicator behavior; done means tabbing to an out-of-view drop indicator scrolls the GridList so the indicator is visible.

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
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.