Skip to content

MultiSelect: Browser becomes unresponsive when selecting all items (100k records) with VirtualScroller enabled #8439

@SwyftLogic

Description

@SwyftLogic

Describe the bug

When using MultiSelect with VirtualScroller enabled and a large dataset (~100,000 records), the browser becomes unresponsive if:
1. All records are selected (using select all or programmatically).
2. The MultiSelect dropdown is opened again.

This causes the UI to freeze for several seconds (or completely hang), making the component unusable at scale.

Image Image Image

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/run?file=src%2FApp.vue

Environment

├─┬ @primevue/forms@4.5.4
│ └─┬ @primevue/core@4.5.4
│ └── vue@3.5.27 deduped
├─┬ @primevue/nuxt-module@4.5.4
│ ├── primevue@4.5.4 deduped
│ └─┬ unplugin-vue-components@28.4.1
│ └── vue@3.5.27 deduped
├─┬ highcharts-vue@2.0.1
│ └── vue@3.5.27 deduped
├─┬ nuxt@4.3.0
│ ├─┬ @nuxt/devtools@3.1.1
│ │ ├─┬ @vue/devtools-core@8.0.5
│ │ │ └── vue@3.5.27 deduped
│ │ └─┬ vite-plugin-vue-tracer@1.2.0
│ │ └── vue@3.5.27 deduped
│ ├─┬ @nuxt/nitro-server@4.3.0
│ │ └── vue@3.5.27 deduped
│ ├─┬ @nuxt/vite-builder@4.3.0
│ │ ├─┬ @vitejs/plugin-vue-jsx@5.1.3
│ │ │ └── vue@3.5.27 deduped
│ │ ├─┬ @vitejs/plugin-vue@6.0.3
│ │ │ └── vue@3.5.27 deduped
│ │ └── vue@3.5.27 deduped
│ ├─┬ @unhead/vue@2.1.2
│ │ └── vue@3.5.27 deduped
│ ├─┬ unplugin-vue-router@0.19.2
│ │ └─┬ @vue-macros/common@3.1.2
│ │ └── vue@3.5.27 deduped
│ └── vue@3.5.27 deduped
├─┬ pinia@3.0.4
│ └── vue@3.5.27 deduped
├── primevue@4.5.4
├─┬ vue-router@4.6.4
│ └── vue@3.5.27 deduped
└─┬ vue@3.5.27
└─┬ @vue/server-renderer@3.5.27
└── vue@3.5.27 deduped

Vue version

latest

PrimeVue version

4.3.4

Node version

24

Browser(s)

Chrome

Steps to reproduce the behavior

1.	Open the VirtualScroll example.
2.	Modify dataset to a large size (e.g., 100k items).
3.	Select all items.
4.	Close the dropdown.
5.	Open it again.
6.	Browser becomes unresponsive.

Expected behavior

VirtualScroller should prevent rendering bottlenecks even when:
• Large datasets are used (100k+ items).
• All items are selected.
• Dropdown is reopened.

The component should remain responsive.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions