Skip to content
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.

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

Virtualized ComboBox miscalculates height of options #1107

Open
SpencerWBarnes opened this issue Mar 1, 2023 · 2 comments · May be fixed by #2061
Open

Virtualized ComboBox miscalculates height of options #1107

SpencerWBarnes opened this issue Mar 1, 2023 · 2 comments · May be fixed by #2061
Assignees
Labels
bug Something isn't working react Needs change in react package

Comments

@SpencerWBarnes
Copy link

SpencerWBarnes commented Mar 1, 2023

Describe the bug (actual behavior)

The bottom of the options list shows a gap below the last option when using a virtualized combobox where the second option has a sublabel and a sufficient number of options without sublabels.

Expected behavior

The bottom of the options list stops at the last option.

Reproduction

Link to a minimal repro: https://codesandbox.io/s/gracious-pond-ur3c5g?file=/src/App.tsx

Steps to reproduce
  1. Open the combobox
  2. Observe gap below the last option

Additional information

This occurs in both scrollable and unscrollable option lists.
It appears the gap is the result of the scrollable distance being calculated as if every option has a sublabel, accumulating all the height differences from all options without sublabels at the bottom.
Testing seems to suggest this only occurs when the second option has a sublabel.

@SpencerWBarnes SpencerWBarnes added the bug Something isn't working label Mar 1, 2023
@SpencerWBarnes SpencerWBarnes changed the title Virtualized ComboBox miscalculates length of scrollable options Virtualized ComboBox miscalculates height of options Mar 2, 2023
@gretanausedaite gretanausedaite added the react Needs change in react package label Mar 3, 2023
@gretanausedaite
Copy link
Contributor

Comment for developer who takes this issue:
Height calculations are done in VirtualScroll.tsx line 421. This function assumes that all middle children heights are the same.

@mayank99
Copy link
Contributor

Updated repro for v3: https://stackblitz.com/edit/github-37lr6c?file=src%2FApp.tsx

It looks a little different, but the blank space can still be seen below the last item.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working react Needs change in react package
Projects
None yet
5 participants