adobe / adobe/react-spectrum

Unable to scroll first section-header into view using arrow keys

Open
#1,658 6 comments 0 reactions 0 assignees View on GitHub
accessibility MenuTrigger
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

Once you scroll the first section out view it is impossible to scroll it back into view unless you use the the mouse.

## 🤔 Expected Behavior

I would expect that if you scroll the first item in a section into view the header not only the item is scrolled into view but also its section header

## 😯 Current Behavior

Impossible to scroll section-header into view. See the following screencast and one can reproduce in the storybook

https://user-images.githubusercontent.com/52631/110013921-79c13f80-7d22-11eb-93ee-c85d236688a6.mp4

## 💁 Possible Solution

I hacked a bit into Virtualizer.ts

```typescript
let x = this.visibleRect.x;
let y = this.visibleRect.y;
let minX = layoutInfo.rect.x - offsetX;
let minY = layoutInfo.rect.y - offsetY;
if (layoutInfo.parentKey) {
let parentLayoutInfo = this.layout.getLayoutInfo(layoutInfo.parentKey);
if (parentLayoutInfo && parentLayoutInfo.rect.y === layoutInfo.rect.y) {
let headerInfo = this.layout.getLayoutInfo(layoutInfo.parentKey + ':header');
if (headerInfo) {
minY = headerInfo.rect.y - offsetY;
}
}
}
```

where I added the IF-Block, unfortunately one can not access the header-layout-info via API so this feels a bit hacky because I rely on the fact that the header info is stored with the key + ':header' (which is an implementation detail of ListLayout) so ideally one could call an API on Layout to get the information required.

This change does not only scroll the primary section header into view but always the section header if you reach the first item in a section. Another small caveat is that I can not differentiate if you nativate via keys or using the mouse so if you click on the first item in a section and although the item is visible in the view port it still scrolls because the section is not visible

## 🔦 Context

## 💻 Code Sample

## 🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| react-spectrum |
| Browser |
| Operating System |

## 🧢 Your Company/Team

## 🕷 Tracking Issue (optional)

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.