Combo-box no longer scrolls as expected when upgrading @react-aria/overlays 3.21.x

[janvorwerk]

Provide a general summary of the issue here

I use a ComboBox with a lot of items with a scrollbar.

Suddenly I realized that it stopped scrolling... I spent most of the day nailing down the issue and creating a test case.

🤔 Expected Behavior?

A combo box with a lot if items should allow the user to scroll.

😯 Current Behavior

The combo box shows the list and the scrollbar but does not allow to scroll

💁 Possible Solution

Remain with @react-aria/overlays 3.20.0

🔦 Context

It seems to depend on the outer CSS... because there are places in my app where the same component works... But I did not see anything very special on my test case... and the fact that it works with an older version of @react-aria/overlays is suspiciuous.

🖥️ Steps to Reproduce

Appologies, I did not manage to reproduce it in a sandbox (in particular, I don't know how to force using @react-aria/overlays 3.20.0 as a transitive dependency.

So I created a repo:
https://github.com/janvorwerk/my-react-aria-app

Version

react-aria-components 1.1.1

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

macOS 14

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I checked and copying our combobox from https://react-spectrum.adobe.com/react-aria/examples/user-combobox.html exhibits the same issue.
However, increasing the number of items in that example in our docs does not have the same issue.

This leads me to think there is an issue with some of the application styles interfering with the combobox in some way. I'd start by comparing the two and changing yours until it gets closer to matching ours. At some point it should work and then we'll know the problem.

[janvorwerk]

Hi @snowystinger,

I made mine work by simply replacing max-h-[inherit] by max-h-[80dvh].

-          <ListBox items={items} className="p-1 max-h-[inherit] overflow-auto">
+          <ListBox items={items} className="p-1 max-h-[80dvh] overflow-auto">

However, looking at the example you linked from the doc, there is no such max-h-[inherit].

and then we'll know the problem

well, this may help you but I remain totally clueless at this stage! 🥹

[LFDanLu]

Perhaps related to #6241, which will be fixed by #6312

[snowystinger]

#6312 has been merged and released, it'd be great if anyone could try this out and see if this has been closed

[janvorwerk]

#6312 has been merged and released, it'd be great if anyone could try this out and see if this has been closed

Hi @snowystinger, I just upgraded my test case to latest package versions and I am sorry to say that it still shows the issue.