search

iTwin / iTwinUI

A design system for building beautiful and well-working web interfaces.
https://itwin.github.io/iTwinUI/
MIT License
92 stars 35 forks source link

ComboBox dropdown sizing problem when using sublabels #2008

Closed wilmaier closed 2 weeks ago

wilmaier commented 2 weeks ago

Describe the bug (current behavior)

When sublabels are not all defined, the size of the dropdown container and scrolling region is not correct and there is a blank area at the bottom. Using a workaround for now to provide a single space string instead of undefined or empty string.

combobox-dropdown

Expected Behavior

No response

Link to minimal repro

https://qa-review.itwin.bentley.com/context/8b3d0653-02b5-4a76-832e-7c16ed50ff21/imodel/b9bf7a2d-bf2e-4d3f-b127-90c8029a855e?changesetid=308791f67a9c5ece81a1c792b3ab3cf1ab584b47&it3mode

Steps To Reproduce

Create a new data visualization. Click on the Property combobox and scroll to the end. There is a blank area and the scroll region extends too far.

Anything else?

No response

mayank99 commented 2 weeks ago

Can you please provide a repro? This bug report is not actionable in its current state.

wilmaier commented 2 weeks ago

To reproduce, open following iModel in pineapple https://qa-review.itwin.bentley.com/context/8b3d0653-02b5-4a76-832e-7c16ed50ff21/imodel/b9bf7a2d-bf2e-4d3f-b127-90c8029a855e?changesetid=308791f67a9c5ece81a1c792b3ab3cf1ab584b47&it3mode

Create a new data visualization. Click on the Property combobox and scroll to the end. There is a blank area and the scroll region extends too far. Expected: image

Actual: image

jason-crow commented 2 weeks ago

@mayank99 fyi this is using @itwin/itwinui-react@2.12.26

mayank99 commented 2 weeks ago

While that link is not a proper repro (and you probably shouldn't share it publicly?), I was able to inspect it and found that you're using enableVirtualization, which is a "beta" feature that requires all items to be the same height (at least currently). To avoid the issue, you can try not using enableVirtualization if your list is not too long, or use a blank sublabel as you mentioned in the original issue.

Our current plan is to refactor the virtual scroll logic in the coming months, which will likely fix this issue but only in v3. Since you're on v2, which is expected to reach end-of-life very soon, you would not benefit from the refactor.

And since this issue is also a duplicate of #1107 (which has a proper repro), I will close it and we can use the other one for tracking.