Due to how this library assigns keys for each option in the selected listbox when allowDuplicates={true}, any time the selected property changes, React will re-render the entire <select> element. This causes the browser to lose focus of its position and scroll back to the top of the <select> screen, negatively impacting user experience.
If, instead, each selected option had its own unique identifier, irrespective of its order, that persisted as the selected property changed, this issue would not occur. However, because the selected property is a flat array of repeatable string values, we are unable to maintain a record of unique identifiers without introducing some convoluted workarounds.
In order to solve this issue, the component should treat object values (analogous to simpleValue={false}) as the first-class approach, such that it can assign and recall unique IDs for each option, reducing unnecessary renders.
Due to how this library assigns keys for each option in the selected listbox when
allowDuplicates={true}, any time theselectedproperty changes, React will re-render the entire<select>element. This causes the browser to lose focus of its position and scroll back to the top of the<select>screen, negatively impacting user experience.If, instead, each selected option had its own unique identifier, irrespective of its order, that persisted as the
selectedproperty changed, this issue would not occur. However, because theselectedproperty is a flat array of repeatable string values, we are unable to maintain a record of unique identifiers without introducing some convoluted workarounds.In order to solve this issue, the component should treat object values (analogous to
simpleValue={false}) as the first-class approach, such that it can assign and recall unique IDs for each option, reducing unnecessary renders.