MultiSelect Not Displaying Pre-Selected Items Upon Load

[lazyeye73]

I'm submitting a ...

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
When a MultiSelect is used in a reactive or template-driven form and the options are populated in an delayed manner (whether asynchronously via an API call or through the use of setTimeout), the initially-selected items are not displayed in the MultiSelect placeholder.

Expected behavior
As in previous versions of PrimeNG, the pre-selected items in the MultiSelect appear comma-separated in the MultiSelect placeholder.

Minimal reproduction of the problem with instructions
https://stackblitz.com/edit/github-tidqpm

• Angular version: 11.0.5

• PrimeNG version: 11.0.0

• Browser: [all]

• Language: [TypeScript 3.8.3+]

Code Fix
This issue can be addressed by changing the "options" setter to update the label and check the filled state, similar to the following:

    set options(val) {
        this._options = val;
        this.updateLabel();
        this.updateFilledState();
        this.checkSelectionLimit();
        this.cd.markForCheck();
    }

[jacqueslareau]

I'm having the same issue with PrimeNG 11.0.0 and Angular 11.0.4

[markusvorraber]

Also same problem here, PrimeNg 11.1.0 and Angular 11.0.7.

[thekip]

Confirm, just add this.updateLabel(); in options setter is enough to re-render label when options loaded.

[zbogdanov]

Hi. It has been over a month now and this bug hasn't been even reviewed. Do we know any ETA on at least starting to fix it? We have numerous hacks through out our codebase to circumvent this issue that worked fine in previous versions...

Thanks!

[scurk1415]

Yeah i also have the same problem. Had to revert back to v10

[chad-smith]

I'm also seeing this issue. Is there a workaround?

[Dador]

Issue still occurs in latest version (11.3.1).

Workaround:

1. Add placeholder (using property):
   <p-multiSelect ... [placeholder]="citiesPlaceholder"></p-multiSelect>

export class ExampleComponent {
    ...
    citiesPlaceholder = '';
    ...
}

2. Set placeholder property after loading options:

this.settingsForm.patchValue({
...
};
this.citiesPlaceholder = 'Select';

P.S. Setting/updating placeholder calls updateLabel(), so fix suggested by @thekip should help.