Unable to scroll first section-header into view using arrow keys
- 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
Assessment
This issue has not been assessed yet.