Skip to content

MultiSelect with VirtualScroll filtering is too slow after scrolling far down #17514

@julrich-bee360

Description

@julrich-bee360

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

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

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

  1. Click on "Select Cities"
  2. Use the mouse to scroll far down in the list (e.g. to Item #66684) using the scroll bar
  3. Click into the filter input box
  4. Type something

Expected behavior

The list is filtered quickly, no matter how far the user scrolled in the list before.

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions