p-multiSelect: Template value is not reflected on page load / pre-populate. Default placeholder is shown.

[Dharmang92]

Describe the bug

The template value "let-value" doesn't get updated on page load or when the page is refreshed. The value does exist in the formControlName "dataverse" in the example below.

<p-multiSelect
  dataKey="uid"
  inputId="dataverse"
  optionLabel="label"
  optionValue="uid"
  [options]="fieldOptions"
  [filter]="true"
  [showClear]="true"
  [showToggleAll]="false"
  [maxSelectedLabels]="7"
  [displaySelectedLabel]="true"
  formControlName="dataverse"
  (onClear)="fieldCleared()"
  (onChange)="fieldChange($event)"
>
  <ng-template let-value pTemplate="selectedItems">
    <div
      class="inline-flex align-items-center gap-2 px-1"
      *ngFor="let option of value; index as i"
    >
      {{
        i < value.length - 1
          ? option.label + ', '
          : option.label
      }}
    </div>
    <span *ngIf="!value?.length">--Select--</span>
  </ng-template>
</p-multiSelect>

Environment

Running Angular in local development mode on Brave browser.

Reproducer

No response

Angular version

17.3.6

PrimeNG version

17.6.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.0

Browser(s)

Brave

Steps to reproduce the behavior

1. Pre-populate the multiselect using any api call or static data in formControl with some assigned values.
2. Refresh the page.
3. It will show "--Select--" instead of the values present in the form.
4. Now click on any value inside multiselect, it will show up the other ones.

Expected behavior

Should show all the values which were initially present in form.

[mhazak]

Experiencing also at @16.9.1 In my case, it seems, that optionValue is causing the problem. Any planned fix on this?

[Etmix]

Still present in 17.17.0

The issue seems to be that dataKey is ignored when optionValue is set: https://github.com/primefaces/primeng/blob/3d5b78ecac68e3b0bb3ef4417c9fc2be3a3fd19d/src/app/components/dropdown/dropdown.ts#L1635-L1637 introduced in commit https://github.com/primefaces/primeng/commit/f52340b9daf5ea2ee921fc0906838b98007cd6ed

Is there a good reason for this? I temporarily fixed it for my usecase by doing this dirty hack before creating any Dropdown: Dropdown.prototype.equalityKey = function () { return this.dataKey; } ... which isn't great, but works for now. A proper solution would be much preferred.

I'll gladly create a pull request (simply always using dataKey), if that would help.