Primeng: Virtual Scrolling for Dropdown Items

[lebnic]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
http://plnkr.co/edit/BJWaGqem2YeUx9lAdKPo?p=preview

Current behavior

Dropdown is slow to render when there are lots of options (eg: 15000 options)
Moreover, when click away, clicking again on dropdown is still slow to render

Expected behavior

"Complete" rendering of dropdown options might be limited proportionnaly to number of options, especially at initial loading. But subsequent "rendering" should be faster (almost instantanious) as data has already been processed. On click, dropdown list should be rendered asap, even if data is not finished being processed. This way user can start scrolling down and use "filter/search" (this would greatly improve UX). Furthermore, It might be beneficial to include a new parameter for dropdown element (eg: renderAsync) such to enable/disable such "partialRendering"...

Minimal reproduction of the problem with instructions

Step-by-step reproduction is included in above plnkr

What is the motivation / use case for changing the behavior?

when user click on dropdown where there are lots of options, there most probably is a "filter/search" box to avoid the need of scrolling down to desired option (since there are lots of options)... However, currently, user must wait for all options to be "rendered" in dropdown before starting to typing in the search box. This is tedious because, maybe it takes 3 seconds to render all options, but it might take 5 seconds for user to enter desired keyword in the search box, thus it currently takes 8 seconds for user to perform a search, while it really should only take 5 seconds. Moreover, user must focus and wait for rendering to complete before starting typing, thus it hinders the work flow and user loses focus on the task at end... IE, user should be capable of starting typing right away without even thinking about dropdown rendering to complete... (sorry for the long paragraph...)

Please tell us about your environment:

Linux

• Angular version: 4

• PrimeNG version: 4

• Browser: All

• Language: TypeScript

• Node (for AoT issues): node --version = v6.9.4

[lebnic]

might be related to https://github.com/primefaces/primeng/issues/1749

[cagataycivici]

Not sure what can we do here except virtual scrolling for dropdown so changing title.

[sebaiona]

I really would appreciate this feature too.

When we have a lot of options, the application is like frozen until they're completely loaded which is not great.

[MosheMoualem]

I really would appreciate this feature too. thanks.
We have huge amount of data and virtual scroll could solve this prob.
Thanks.

[mariusreusch]

Same here. We would really appreciate this feature! Thanks!

[cagataycivici]

7245