Skip to content

Selected options losing focus when using allowDuplicates #250

Open
@jakezatecky

Description

@jakezatecky

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.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions