primeng icon indicating copy to clipboard operation
primeng copied to clipboard

fix(autocomplete): support full option object in selectedItemTemplate with optionValue and multiple

Open gmaggiodev opened this issue 8 months ago • 6 comments

When using optionValue with multiple=true, the selected items rendered in selectedItemTemplate receive only the primitive value (e.g., an ID), making it impossible to access the full object context (e.g., to render a label or additional fields).

This PR introduces a complete internal solution that ensures the model (modelValue) always contains full objects — even if the bound ngModel uses primitive values — by mapping them from the available suggestions during writeValue() and after suggestion updates.

This avoids relying on potentially filtered or dynamic suggestions arrays at render time, ensuring stable rendering and correct template behavior.

✨ Key Changes

  • writeValue() sets modelValue to the full option(s) when optionValue is used, using a resolvePendingValue() mechanism.
  • resolvePendingValue() ensures that selected values are resolved to objects once suggestions are available (supports async/lazy).
  • Modified onOptionSelect() and updateModel() to maintain consistency of full objects in modelValue.
  • Keeps full compatibility with optionValue, optionLabel, and multiple=true.
  • Added new documentation samples explaining both cases (with and without optionValue)

image

image

✅ Benefits

  • Full context is always available for templates, without needing to search in suggestions dynamically.
  • Works even when suggestions are loaded lazily or filtered.
  • No breaking changes.

🛠 Example Use Case

<p-autoComplete
  [(ngModel)]="selectedIds"
  [suggestions]="options"
  [optionValue]="'id'"
  [optionLabel]="'name'"
  [multiple]="true"
>
  <ng-template let-option pTemplate="selecteditem">
    {{ option.name }}
  </ng-template>
</p-autoComplete>

Here, selectedIds is an array of IDs, but option in the template will still be the full object ({ id, name }).

Fixes:

Closes #17332

gmaggiodev avatar Apr 07 '25 10:04 gmaggiodev

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment
Name Status Preview Updated (UTC)
primeng-designer-staging ⬜️ Ignored (Inspect) Visit Preview Apr 7, 2025 10:50am

vercel[bot] avatar Apr 07 '25 10:04 vercel[bot]

Hi, any update on this? This issue is quite critical for us — if it doesn't get resolved, we'll unfortunately be forced to consider switching to a different library.

gmasci-ca avatar May 12 '25 09:05 gmasci-ca

nice

its-dibo avatar May 29 '25 09:05 its-dibo

Working with reactive forms?

filiptrivan avatar May 30 '25 16:05 filiptrivan

Working with reactive forms?

Yes. It doesn't depend on forms type. It depends on how the value is managed internally.

gmaggio-ca avatar Jun 03 '25 08:06 gmaggio-ca

@gmaggio-ca is attempting to deploy a commit to the primetek Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Jun 05 '25 06:06 vercel[bot]

Trying to collaborate, BUT:

  • Posted this PR to solve #17332 3 months ago.
  • Tried to resolve conflicts one month ago.

Is there anybody out there? @cagataycivici

gmaggio-ca avatar Jul 07 '25 06:07 gmaggio-ca