Describe the bug
When using the MultiSelect component with VirtualScroll with many options, filtering the list of options is very slow after scrolling far down in the list, which brings up the "Page(s) Unresponsive" dialog.
The filtering is fast when not scrolling at all or only scrolling a few hundred entries. However, the further you scroll, the slower it gets and after some point, it brings up the "page unresponsive" dialog.
I also noticed that it's only the very first character which is slow. After handling the first character entering further characters works smoothly.
Tested it in Chrome (132.0.6834.111, arm64) and Opera (115.0.5322.119, arm64).
It's also reproducible on the PrimeNG documentation page: https://primeng.org/multiselect#virtualscroll
Pull Request Link
No response
Reason for not contributing a PR
Other Reason
No response
Reproducer
https://stackblitz.com/edit/uxrdq4sr
Environment
- macOS 14.6.1
- MacBook Pro
- Apple M2 Max
- 96 GB RAM
Angular version
19.0.1
PrimeNG version
v19
But v17 and v18 are also affected (tested on the PrimeNG documentation page).
Node version
No response
Browser(s)
No response
Steps to reproduce the behavior
- Click on "Select Cities"
- Use the mouse to scroll far down in the list (e.g. to
Item #66684) using the scroll bar
- Click into the filter input box
- Type something
Expected behavior
The list is filtered quickly, no matter how far the user scrolled in the list before.