NOTE: This issue potentially addresses some performance problems identified in #843 (and others).
Is your feature request related to a problem? Please describe.
The current Dropdown/Multiselect we ship with IDS was created as an interaction layer over top of the standard HTML <select>
element, handling the selection of its options in both single/multiple settings.
The use cases for this component have increased over time to include filtering of the available options, which has led to teams using the Dropdown/Multiselect for extremely large datasets (topping over 2000 items at a time, in some cases). While our team retains that we don't recommend using this component for datasets this large, we continue to get issues requesting that we address performance at these levels. Some previous issues we've fixed include:
Many of those issues leave the caveat of "this is still not great but it's better". The reason for this is because the design of the Dropdown/Multiselect at its core doesn't lend itself well to datasets this large. If we want to fix performance problems, we need to address the fundamentals of its design.
Describe the solution you'd like
A possible solution path for fixing performance of Dropdown/Multiselect:
<select>
as the primary datasource. Some recent improvements from #267 began to map out how an AJAX call might generate a data object for Dropdown that we can store on the client. I think that we should move toward using an object with some simple states (disabled/selected/etc) as the primary driver of the component's behavior, instead of grabbing this information from a DOM element. The rendering of the <select>
tag and its <option>
s will still be necessary for things like form submission, but we should define the data object as the "source of truth", and draw the select tag based on the object (not vice-versa).<select>
tag in any sense. It may be a reasonable use case for a developer utilizing the Dropdown/Multiselect with this many items to simply intercept a request for form submission, and send the state of the datasource object instead of relying on the normal form submission process. Currently, this type of use isn't possible.Describe alternatives you've considered
Some other ideas that we've floated in the past:
<select>
tags and styles them, instead of generating pseudo-markup for interactions. This might be able to better handle the larger list since it wouldn't duplicate it. We'd still have to handle 2000ish elements at once in this case.Also we could implement a generic virtual scrolling feature and apply it to several components. https://github.com/infor-design/enterprise/issues/460
@tmcconechy I see that happening much more easily once we remove the dependency on the <select>
tag.
All they care about is selected element. So i think the dom would just contain a select with only the selected element in it and it could satisfy both cases.
Closing this in favor of https://github.com/infor-design/enterprise/issues/1463