Skip to content

Conversation

BRobin55
Copy link
Contributor

Closes #8234

This PR makes three changes:

1. Use isFocused instead of focusedKey for tabIndex
Previously, the tabIndex was determined by whether focusedKey was null. However, focusedKey persists even after tabbing out of the collection. This caused the collection root to remain non-tabbable, and as a result the browser would default to focusing the first or last focusable element inside the collection (e.g., a button) when tabbing back in. Once the browser focused that button, the focus logic ran and scrolled the focusedKey item into view — which led to the “jump” that was observed. By switching the condition to use isFocused instead, the collection root becomes tabbable whenever the collection itself is not focused. This prevents the browser from landing on inner focusable elements and eliminates the initial jump when tabbing back into the collection.

2. Always track scroll position
The useEvent(scrollRef, 'scroll', ...) handler is now always active, rather than being disabled for virtualized collections. This ensures the current scroll position is always stored, even when virtualization is used.

3. Always restore scroll position on focus
Similarly, the scroll position is now restored whenever the collection regains focus, regardless of whether it is virtualized. This prevents jumps when shift+tabbing back into the collection. I guess the issue #2233 is connected to the problem.

I am still curious why scroll position saving/restoring was originally disabled for virtualized collections. My assumption is that it may have been excluded to avoid interfering with virtualization behavior or for performance reasons.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

@BRobin55 BRobin55 closed this Aug 25, 2025
@BRobin55 BRobin55 reopened this Aug 25, 2025
@snowystinger
Copy link
Member

Thanks for the PR. There still seems to be some bad scroll behaviours, I'm not sure if it's related? I've built your PR over at #8773

https://reactspectrum.blob.core.windows.net/reactspectrum/c3a63770a69aa9bc28dd24df0713f7a2f731b747/storybook/index.html?path=/story/react-aria-components-gridlist--virtualized-grid-list&providerSwitcher-express=false

  1. click item 5
  2. tab away
  3. scroll item 5 out of view via track pad or scroll wheel without putting focus on the gridlist
  4. shift+tab back, focused item doesn't scroll into view
  5. shift+tab again
  6. tab back into the gridlist once more, item ~36 is scrolled into view

@nwidynski
Copy link
Contributor

@snowystinger Thanks for the build, we can take care of that issue also 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Virtualized grids scroll unnecessarily when restoring focus to item in view
3 participants