primefaces
autocomplete dont render selecteditem Templete with multiple=false
Describe the bug
AutoComplete component with multiple set to false, the selectedItemTemplate is not rendered after selecting an item. This works correctly when multiple=true.
Pull Request Link
No response
Reason for not contributing a PR
- [ ] Lack of time
- [ ] Unsure how to implement the fix/feature
- [ ] Difficulty understanding the codebase
- [ ] Other
Other Reason
This issue appears to be related to the template rendering logic for single-selection mode.
Workaround: None found for multiple=false.
Reproducer
https://stackblitz.com/edit/github-d16kd56z-m8fkpq9h?file=src%2Fapp%2Fapp.component.html
Environment
PrimeNG Version: 20.0.1 Angular Version: 20.1.7 Browser(s): Chrome OS: Windows 11
Angular version
20.1.7
PrimeNG version
v20
Node version
22.10.2
Browser(s)
Chrome
Steps to reproduce the behavior
- Create an AutoComplete component with: [(ngModel)] bound to a single object multiple set to false selectedItemTemplate defined in the template
- Search for and select an item.
- Observe the rendered value in the input field.
<p-autocomplete
[(ngModel)]="value1"
[suggestions]="items"
(completeMethod)="search($event)"
[multiple]="false"
>
<ng-template pTemplate="selectedItem" let-item>
Custom selected item label
</ng-template>
</p-autocomplete>
Expected behavior
The selectedItemTemplate should be applied to the selected value when multiple=false, similar to how it works when multiple=true.
Do you guys have any workaround besides enabling multiple="true"? By now I think that using the p-select + filter would allow users to have a pretty similar experience
We also encounter a similiar issue since v19.
Given this simple template,
<!-- selected: ModelSignal ; suggesstions: Signal<SelectedItem> -->
<p-autoComplete [(ngModel)]="selected" [suggestions]="searchUdSuggestions()" (completeMethod)="search($event)">
</p-autoComplete>
Suggestions items are displayed using the "label" property. When we select an item, the input's value besome "[object Object]".
As a workaround, I had to write this directive... if it can help.
@Directive({
standalone: false,
selector: 'p-autoComplete, p-autocomplete',
})
export class AutocompleteLabelDirective implements OnDestroy {
field: InputSignal<string> = input();
label: InputSignal<string> = input();
optionLabel: InputSignal<string> = input();
readonly autoComplete = inject(AutoComplete, { optional: true });
private sub$: Subscription;
constructor() {
if (this.autoComplete && this.autoComplete.multiple !== true) {
this.sub$ = this.autoComplete.onSelect.subscribe(item => {
this.autoComplete.inputEL.nativeElement.value = resolveFieldData(item.value, this.field() || this.label() || this.optionLabel() || 'label');
})
}
}
ngOnDestroy(): void {
this.sub$?.unsubscribe();
}
}
Specifying optionLabel works for me if you only need to display text of selected item: https://v20.primeng.org/autocomplete#objects Since the item template works, the options template can still be customized and the selected item can be displayed as text instead of [object Object] until they fix the selecteditem support...
