Allow passing of scroll container to useGridList
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
# 🙋 Feature Request
The new useGridList feature uses `useSelectableList` which does not allow for passing a scroll container via `scrollRef` (like the Table component does). This assumes the scroll container is always the list view itself, which is not always the case. This request is to add the capability for passing a `scrollRef` prop into `useGridList`.
## 🤔 Expected Behavior
By providing a scrollable container, the GridList will be able to use a non-fixed height and still scroll list elements into view. See context below.
## 😯 Current Behavior
Scrolling items into view is only possible when the list itself is scrollable.
## 💁 Possible Solution
`useSelectableList` could allow for a `scrollRef` prop instead of [assuming it's the list ref itself](https://github.com/adobe/react-spectrum/blob/49026315c499852d6ab5d2bf5b9907ac7e0c2850/packages/%40react-aria/selection/src/useSelectableList.ts#L127)
## 🔦 Context
My use case is to provide multiple lists on the page with non-fixed heights. If the list exceeds the body of the page, the body itself would act as the scroll container and scroll list items into view.
## Code sample
https://stackblitz.com/edit/react-spectrum-3489?file=src/App.js
Contributor guide
Research direction
Start with packages/@react-aria/selection/src/useSelectableList.ts at the linked line, then trace how useGridList passes options into useSelectableList. Use the StackBlitz example to reproduce the nested or body-scroll case; done means useGridList accepts a scrollRef and scrolls list elements into view when that container is scrollable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100