Getting white space while scroll to the bottom of the combobox

[NarendraKuruva]

Provide a general summary of the issue here

Here is a reproducible code sandbox

GIF Reference:-

I've copied the latest published (May 1st) combobox & list box components

And I'm getting white space when scrolling

🤔 Expected Behavior?

Should not get any white space

😯 Current Behavior

Getting white space while scrolling to the end fast

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. Open combobox
2. Scroll to the end of the combobox, to the last pagination
3. Close the combobox
4. Open again and scroll to the end fast
5. You will be able to the whitespace

Version

Not installed react-spectrum

What browsers are you seeing the problem on?

Chrome

If other, please specify.

Using specific nested packages

What operating system are you using?

Ubuntu 22.04.4 LTS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Its hard to tell what exactly is broken here since I can't easily tell what changes exist between the sandbox and the RSP ComboBox component. It seems like a 1:1 copy but there are styles that are missing because the Spectrum specific class names don't have their associated styles and there are other behavioral differences from the RSP ComboBox like the popover closing even with "Emulate a focused page" turned on. Can you try unifying the packages so they only use the monopakage import where possible so that there aren't any duplicate package issues? Might be easier to debug if you use the Item/etc implementations straight from @adobe/react-spectrum and then gradually change them to your custom implementation to see where the break happens.

[RajaTheKing826]

@LFDanLu When i read the spectrum code the height of the popover is calculating in hooks instead of with css classnames so i think class names aren't the issue. Can you define what is unifying packages because we didn't install any duplicate package versions in the above codesandbox.

So can you please check the code once and tell what we are missing.

[LFDanLu]

I don't think the class names would be the issue either but as I mentioned there are other behavior differences other that the additional whitespace that you are seeing that make me think that there are other changes to the copied code that I can tell from a glance or something else in the setup (duplicate packages/etc) that are causing these issues. Duplicate packages can arise due to each installed package pulling its own version of various dependencies that aren't deduplicated by the package manager automatically. I would recommend you start with first using the ComboBox as is from React Spectrum's @adobe/react-spectrum package, then slowly replace the implementation bit by bit and see when/where it breaks.

That being said, if you are trying to create your own combobox, I'd highly recommend using the React Aria Components version of it rather than copying the React Spectrum implementation. The React Spectrum implementation comes with many Spectrum Design specific behaviors and may be difficult to untangle and customize. Virtualization support is being worked on for React Aria Components as a whole as well so soon there will be parity between the two.