Multi Select loading data

[32x0lf]

Hi,

I noticed in multi select with more than 1.5k+ data, it will give a delay for 15 secs to the screen. and another thing if I assign a default value for the multi select, there is also a delay.

Please advise. Thank you

[xidedix]

@32x0lf We are aware of the issue. Multi-select was not designed for such amounts of data. We're going to introduce a virtual scroll for multi-select later this month to handle this use case.

[32x0lf]

Thank you looking forward

[32x0lf]

@32x0lf We are aware of the issue. Multi-select was not designed for such amounts of data. We're going to introduce a virtual scroll for multi-select later this month to handle this use case.

Hi @xidedix ,

What version should I use for this update? I am using angular 14. TIA

[xidedix]

@32x0lf you can try: https://coreui.io/angular/docs/forms/multi-select#virtual-scroller

version:

• ~4.2.36 for Angular 14
• ~4.3.18 for Angular 15
• ~4.4.0 for Angular 15 (standalone components)

[32x0lf]

@xidedix Thank you will check on this.

[32x0lf]

@xidedix,

Is there a way that the data will populate right away during loading? it seems it will still wait for a couple of minutes. I tried another library which is ng-multiselect-dropdown it will populate right away but the problem is, the dropdown is being cut off from the parent component where the dropdown is placed and that component is the coreui accordion.

[xidedix]

@32x0lf have you tried it with virtual scroller? the example takes 10000 options without issues or delays https://coreui.io/angular/docs/forms/multi-select#virtual-scroller

[32x0lf]

Hi @xidedix ,

yes I tried but I encounter some issue where I initialize the fromcontrol. When I tried to search and select in the dropdown, it will reset to the initialize value. This only happens when you search in dropdown.

this.clienttForm = new FormGroup({
      accountmanager: new FormControl<string[]>(['0']),
    })

<c-multi-select
                    (searchValueChange)="searchValueChannelManager$.next($event)"
                    [options]="(optionschannelmanager$ | async) ?? []"
                    [search]="searchFn"
                    formControlName="accountmanager"
                    itemMinWidth="333"
                    single
                    virtualScroller
                    visibleItems="8"
                    size="sm"
></c-multi-select>

If I remove the default value and search in drop down,it will properly display the selected one

[xidedix]

@32x0lf

fixed in:

~4.2.39 for Angular 14 ~4.4.12 for Angular 15 ~4.5.1 for Angular 16

[32x0lf]

Thank you @xidedix