Getting Blank spaces in the middle of the popover while a try to navigate using key board up arrow and down arrow in combobox

[RajaTheKing826]

Provide a general summary of the issue here

When i open popover and scroll down to bottom and tried to select option by navigating to first elements of the popover using up arrow in key board giving me un expected blank spaces in the middle.

🤔 Expected Behavior?

Navigation between items with arrow keys and scroll bar should work fine.

😯 Current Behavior

Getting white spaces which are unexpected and too odd.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/sharp-cohen-m2jjz8?file=%2Fsrc%2FListBoxV1%2Findex.css

Here open the popover of combobox by clicking on the chevron down icon , and scroll to last item of the popover and try to reach the first element of the popover with arrow keys in keyboard. Try to reproduce it 5 times you'll definitly get it. I'm getting it too frequently.

Version

Not using react spectrum instead using nested packages

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Ubuntu 22.04

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I corrected your sandbox so it didn't have duplicate keys and I'm unable to reproduce. Please check if you have duplicate keys

[RajaTheKing826]

I've forgotten to update the keys, yes the keys are the reason for getting those white, but if I increase my option height still im getting the white spaces even though i have given the unique keys.

And i found the reason too.

In our listbox base we are fixing the estimated row height as some px.

let layout = useMemo(
    () =>
      new ListLayout<T>({
        estimatedRowHeight: scale === "large" ? 48 : 44,
        estimatedHeadingHeight: scale === "large" ? 33 : 32,
        padding: scale === "large" ? 5 : 4, // TODO: get from DNA
        loaderHeight: 44,
        placeholderHeight: scale === "large" ? 48 : 44,
        collator,
      }),
    [collator, scale]
  );

When i try to give more height to option manually then i'm getting this blank space. So if i want to increase the height of the option outise, then i need to increase the estimated height in layout too.

I got this, but I don't know how this is causing the white spaces can you give me any brief what is this layout and how it effecting the blankspace.