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:

primeng/src/app/components/dropdown/dropdown.ts

Lines 1635 to 1637 in 3d5b78e

	equalityKey() {
	return this.optionValue ? null : this.dataKey;
	}

introduced in commit f52340b

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.

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,