adobe / adobe/react-spectrum

Allow passing of scroll container to useGridList

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.