MultiSelect: Very long selection time due to Chips

[arielkuzminski]

Describe the bug

Hello.
For some reason MultiSelect takes very long time to select all items in list or even single select when lots of items are already selected.
I did a "Performance" benchmark and I think issue is in deepEquals function used by PrimeVue, although I may be wrong.

Reproducer

https://codesandbox.io/s/primevue-multiselect-long-selection-time-stwzeq?file=/src/MultiSelectDemo.vue

PrimeVue version

3.20

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

1. Open CodePens MultiSelectDemo.vue file
2. Open MultiSelect component and click Checkbox for selecting all items.
3. Depending on your CPU, selection will take about 5 - 20 seconds, or even in bad case browser tab may freeze.

Expected behavior

Selection should take much less time

[arielkuzminski]

UPDATE:
https://codesandbox.io/s/primevue-multiselect-long-selection-time-forked-jf6tvc?file=/src/MultiSelectDemo.vue
I've found temporary solution but there's still something wrong with how base code works.
Solution:

1. Use :maxSelectedLabels property even though we are using Chips
2. Add code that is going to restrict display chips (yes, even though we already used maxSelectedLabels):

      <template #value="slotProps">
        <template v-if="slotProps.value && slotProps.value.length > MAX_CHIPS_DISPLAYED">
          {{ slotProps.value.length }} items selected
        </template>
      </template>

MAX_CHIPS_DISPLAYED is just a ref of type Number you want to restrict rendering

Funny (or sad) thing is that this solution is not working if you skip any of above steps. Those two steps have to work together.

[mertsincan]

Hi @arielkuzminski,

I made some changes related to maxSelectedLabels and chips mode. For your case, you can use :maxSelectedLabels options.

Best Regards,

[arielkuzminski]

Hi @arielkuzminski,

I made some changes related to maxSelectedLabels and chips mode. For your case, you can use :maxSelectedLabels options.

Best Regards,

Thanks for the contribution.

Good day!