adobe / adobe/react-spectrum

ListBox keyboard navigation with Virtualizer fails to focus and scroll to last item during async loading

Open
#10,129 6 comments 0 reactions 0 assignees View on GitHub
bug ListBox 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

ListBox keyboard navigation does not work correctly with Virtualizer when async loading is enabled.

When using a ListBox with async loading only, pressing the End key moves focus to the last loaded item, scrolls it into view, and triggers loading more items. This can be repeated until all items are loaded.

However, when the ListBox is wrapped with Virtualizer, pressing End several times eventually stops focusing the last item correctly, and the focused item is not scrolled into the visible area.

Reproduction demo:
https://stackblitz.com/edit/d2rrxber?file=src%2FExample.tsx

### 🤔 Expected Behavior?

When ListBox is used with both async loading and Virtualizer, pressing the End key should behave the same as it does without Virtualizer.

Specifically:

Pressing End should move focus to the last currently loaded item.
The focused item should be scrolled into view.
If more items are available, reaching the end should trigger loading more items.
After more items are loaded, pressing End again should move focus to the new last item and scroll it into view.
This should continue to work until there are no more items to load.

### 😯 Current Behavior

When the ListBox is wrapped with Virtualizer, the End key works initially, but after pressing it several times, keyboard navigation breaks.

The last item is no longer focused correctly, and it is not scrolled into the visible area. As a result, users cannot reliably navigate to the end of an async-loaded virtualized list using the keyboard.

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

Open the reproduction demo:
https://stackblitz.com/edit/d2rrxber?file=src%2FExample.tsx

Focus the virtualized ListBox.

Press the End key.

Wait for more items to load.

Press the End key again.

Repeat the previous two steps several times.

Observe that eventually the last item is no longer focused correctly and is not scrolled into view.

### Version

"react-aria-components": "^1.17.0"

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

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

MacOS 26.2

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and its src/Example.tsx entry point, then trace ListBox keyboard handling together with Virtualizer and async loading. Reproduce repeated End-key presses and verify that each newly loaded last item receives focus, scrolls into view, and continues loading until the list is complete.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.