search

primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.75k stars 1.17k forks source link

Browser Infinite Waiting State Error When Using VirtualScroll in MultiSelect Component #5846

Open scarlet0o0 opened 3 months ago

scarlet0o0 commented 3 months ago

Describe the bug

We are currently using PrimeVue effectively in our project. However, when a large amount of data exists in the MultiSelect and VirtualScroll is applied, clicking the select-all checkbox, closing the select box, and then reopening it causes the browser to enter an infinite waiting state. Is there a solution for this?

Reproducer

https://stackblitz.com/run?file=src%2FApp.vue

PrimeVue version

3.52.0

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

https://github.com/primefaces/primevue/assets/67679972/a845bd68-99ed-46f3-affa-6be2519bd821

Expected behavior

No response

1Map commented 3 months ago

They have a "for loop" on MultiSelect (findSelectedOptionIndex). This takes forever when there are 100,000 records and hangs...

https://github.com/primefaces/primevue/blob/401dd225677796f05321b0c98ac68b51f3487de6/components/lib/multiselect/MultiSelect.vue#L852

Not sure if this options on the MultiSelect will help:

      :selectOnFocus="false"
      :autoOptionFocus="false"

Using a Map for fast lookups is the most straightforward optimization. It significantly reduces the time complexity of finding matches. Web Workers can be beneficial if the processing is very heavy and you need to keep the UI responsive.