Topic: Select with many Options?
ECKD GmbH
priority
asked 1 day ago
Question
Is it possible in any way to have a large amount of options without the select becoming really inperformant? I know that selects with an extreme amount of options are an anti pattern, but we have to implement it that way...
Currently, when having like 2000 Options, the website and especially the control gets really slow. What makes sense, because these 2000 Options are always rendered, even if only 4-5 are visible.
After going over the mdb-select component code real quick, i can't find a way to make this run, because the options always need to be rendered since this component works with a ContentChildren query. When making Options [hidden] it's still extremly inperformant. And there's also no event emitter for the select dropdown when scrolled to the end of the list to load more / show more options. Further the "select all" option only would select the rendered options.
Is there any recommended way to make this work with the current state of the component?
Expected behavior
A Select can have 2000 Options, that are only rendered on demand, to optimize performance.
"Select All" selects all options, even currently not rendered options.
"Filter" searches over all options, not only renderd options.
Options can be dynamically rendered / added when scrolled to the end of the select list.
Actual behavior
Website crashing or becoming extreme laggy. Alle Options must be rendered for the select to work as expected.
Arkadiusz Idzikowski
staff
answered 1 day ago
I'm afraid that solving this problem in the current version is not possible due to the limitations you mentioned.
Since this is a rather rare use case we don't want to completely rebuild the component, but I'll add it to our to-do list and see if we can add some minor fixes that will make the dynamic option loading support easier to implement.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 7.1.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No