adobe / adobe/react-spectrum

Can't make ListBoxSection sticky

Open
#8,117 1 comment 0 reactions 0 assignees View on GitHub
enhancement needs investigation Virtualizer
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

I have a virtualized listbox that I want to have sticky sections in. I wrote this custom layout

```
class StickyListBoxLayout extends ListLayout {
shouldInvalidate() {
return true;
}

getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
const info = super.getVisibleLayoutInfos(rect);
const stickyItems: Node[] = [];

// Find the sticky items
for (const item of this.collection) {
if (this.collection.getItem(item.key)?.props["data-sticky"]) {
stickyItems.push(item);
}
}

// Add the sticky items to the layout info if needed
for (const item of stickyItems) {
const currentLayoutInfo = info.find((i) => i.key === item.key);

if (!currentLayoutInfo) {
const layoutInfo = this.getLayoutInfo(item.key);

if (layoutInfo) {
layoutInfo.isSticky = true;

info.push(layoutInfo);
}
} else {
currentLayoutInfo.isSticky = true;
}
}

return info;
}

// Provide a LayoutInfo for a specific item.
getLayoutInfo(key: Key): LayoutInfo | null {
return super.getLayoutInfo(key);
}
}
```

it find sticky items and makes sure they are still in the layout. this works for items but not sectiosn

### 🤔 Expected Behavior?

It works for sections too

### 😯 Current Behavior

it doens't

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

Use the provided list

### Version

1.8.0

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

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

Mac

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