fix(autocomplete): support full option object in selectedItemTemplate with optionValue and multiple
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()setsmodelValueto the full option(s) whenoptionValueis used, using aresolvePendingValue()mechanism.resolvePendingValue()ensures that selected values are resolved to objects once suggestions are available (supports async/lazy).- Modified
onOptionSelect()andupdateModel()to maintain consistency of full objects inmodelValue. - Keeps full compatibility with
optionValue,optionLabel, andmultiple=true. - Added new documentation samples explaining both cases (with and without optionValue)
✅ Benefits
- Full context is always available for templates, without needing to search in
suggestionsdynamically. - 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
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 |
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.
nice
Working with reactive forms?
Working with reactive forms?
Yes. It doesn't depend on forms type. It depends on how the value is managed internally.
@gmaggio-ca is attempting to deploy a commit to the primetek Team on Vercel.
A member of the Team first needs to authorize it.
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