Description
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.