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

[alirezamirian]

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]

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.

[yihuiliao]

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.

[alirezamirian]

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?

[alirezamirian]

@yihuiliao @LFDanLu Thanks again for the quick fix and sorry about the nudge, but we couldn't find a temporary workaround for this regression, and it would be super helpful if you could release a patch version for those few packages or let us know a tentative ETA otherwise.

[snowystinger]

We are putting together a release right now. Hopefully will be out within the next week at latest.
In the meantime, have you tried patch-package, yarn patch, or the nightly version?

[alirezamirian]

That sounds great, thanks!
We use react aria in component library that's used in hundreds of apps, so patching is not a practical option.