Skip to content

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

@zzzze

Description

@zzzze

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions