Skip to content

Combobox closes when navigating items with keyboard (May release regression) #8298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
alirezamirian opened this issue May 23, 2025 · 3 comments · Fixed by #8301
Closed

Combobox closes when navigating items with keyboard (May release regression) #8298

alirezamirian opened this issue May 23, 2025 · 3 comments · Fixed by #8301
Labels
bug Something isn't working

Comments

@alirezamirian
Copy link
Contributor

Provide a general summary of the issue here

It's a regression caused by the May release. Navigating past the last visible item scrolls the window closing the dropdown.

react-spectrum-combobox-bug.mov

🤔 Expected Behavior?

It should be possible to navigate listbox items.

😯 Current Behavior

The page scrolls unnecessarily, moving the combobox and closing the dropdown.

💁 Possible Solution

Not sure why, but this line is causing the window to scroll:

react-spectrum/packages/@react-aria/utils/src/scrollIntoView.ts

Line 114 in 0784c3d

opts?.containingElement?.scrollIntoView?.({block: 'center', inline: 'center'});

Not sure about the root cause but originalTop and newTop are not equal after the May release.

🔦 Context

It happened in our library that's built on top of react aria, and the same issue was reproducible in react-spectrum too.

🖥️ Steps to Reproduce

  1. open https://codesandbox.io/p/sandbox/happy-elion-hqrj27?file=%2Fpackage.json
  2. resize window so that the combobox dropdown would be scrollable.
  3. open the combobox dropdown and navigate with keyboard to the last item.

Version

3.42.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response
@alirezamirian
Copy link
Contributor Author

Some more finding:
It should be related to this change: 493a9ae#diff-e356ae602508922357fd9cd1aa7896f74e24f87bcb2ee86a7bb4a486ea87a2f2L519

Previously, scrollIntoView and scrollIntoViewport were called in order, so the listbox option was already scrolled into view when scrollIntoViewport was called, resulting in the top being unchanged in the referenced if statement. Now scrollIntoView is delayed with a requestAnimationFrame.

Image

@yihuiliao
Copy link
Member

Thanks for the issue and doing a bit of the investigation. It is very much appreciated and helps a lot. It does seem like it has to do with the order that scrollIntoView and scrollIntoViewport are called.

We originally added the requestAnimationFrame because of an issue with the selected item not scrolling into view in Picker but seems like that introduced this bug unfortunately. I've experimented a bit with adding a raf around scrollIntoViewport which seems to solve the issue you're experiencing but running into some tests failing.

I wasn't able to reproduce this in our storybooks with and without scrolling on. I can within the docs if I resize the screen small enough so that the popover is scrollable.

@yihuiliao yihuiliao added the bug Something isn't working label May 23, 2025
@yihuiliao yihuiliao moved this from 🩺 To Triage to 🏗 In Progress in RSP Component Milestones May 23, 2025
@yihuiliao yihuiliao mentioned this issue May 23, 2025
Merged
5 tasks
@github-project-automation github-project-automation bot moved this from 🏗 In Progress to ✅ Done in RSP Component Milestones May 27, 2025
@alirezamirian
Copy link
Contributor Author

Thanks for the quick fix. Is there a chance you of having this released in a patch version (in selection, select and combobox packages at least) before the next minor release?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
RSP Component Milestones
Status: ✅ Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: prevent combobox from closing when navigating through items with keyboard adobe/react-spectrum
2 participants
@alirezamirian @yihuiliao