search

iTwin / iTwinUI

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

ComboBox: Selected options jittering #2112

Open jasdom opened 1 week ago

jasdom commented 1 week ago

Describe the bug (current behavior)

When multiple property is set to true and more options are selected than can fit inside the ComboBox input component, occasionally the selected options will start jittering by switching back and forth between displaying n and n+1 options.

The issue only happens under some sizes of the ComboBox and does not always replicate with the same settings on different machines or browsers. Seems like it occurs when the available space is almost enough to fit another tag in.

Expected Behavior

Displayed selected option amount does not rapidly change.

Link to minimal repro

https://stackblitz.com/edit/github-sfphuz-laltrk?file=src%2FApp.tsx

Steps To Reproduce

  1. Open sandbox.
  2. You should see the selected options rapidly changing for some of the ComboBox components.
  3. Toggling repeatedly between light / dark theme sometimes fixes / creates this issue.

Anything else?

No response

r100-stack commented 6 days ago

@jasdom Thanks for reporting this issue with a useful repro.

I looked into this for a while. Although I'm not totally sure of what's causing the issue, I think there is an infinite loop where the visibleCount from our useOverflow internal hook changes on each resize of iui-select-tag-container and each resize changes the visibleCount.

I believe if useOverflow is able to give an accurate visibleCount value that does not trigger a large resize, this issue will be fixed.

Investigating this further.

cc @iTwin/itwinui-1