Autocomplete: selectedItem template only works if multiple="true"

[Kev1n337]

Describe the bug

According to the documentation, there should be a selectedItem-Template, that is used for displaying the selected object from an autocomplete input. Currently this template is ignored and instead the [field]-attribute is used. This does not allow to specify a complex template when the suggestions are complex objects.

This issue has also been reported in #2242 @mertsincan said a new ticket should be opened if the issue still persists.

Environment

Current version of angular and primeng, happening in all browsers.

Reproducer

https://github-cnxtrn.stackblitz.io

Angular version

15.2.8

PrimeNG version

15.4.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

No response

Steps to reproduce the behavior

1. Open Stackblitz or use this snippet in your application:

<p-autoComplete
  [(ngModel)]="customer"
  (completeMethod)="searchCustomers($event)"
  [suggestions]="customerSuggestions"
  [forceSelection]="true"
  field="last_name"
>
  <ng-template pTemplate="selectedItem" let-customer>
    <div>{{ customer.first_name }} {{ customer.last_name }}</div>
  </ng-template>

  <ng-template let-customer pTemplate="item">
    <div>{{ customer.first_name }} {{ customer.last_name }}</div>
  </ng-template>
</p-autoComplete>

2. See the input value of a selected item being "Doe" (from 'field') instead of "Jane Doe" (from 'selectedItem')

Expected behavior

When the selectedItem is specified it should be used instead of the field-attribute.

[denny99]

Yeah selected item only work in multiple mode...

In single mode the input is field with the selected field

[ThoSap]

Duplicates #2242 (opened in 2017) and #10360 (2021), but these issues were somehow closed. @mertsincan @cetincakiroglu

[straiforos]

This is very important to my project, and it is heartbreaking to see this has been ignored and closed out many times. BUMPing the thread.

[ThoSap]

@cetincakiroglu

[bluesbroz]

You can use optionLabel as a function to make a custom value.

/**
 * Property name or getter function to use as the label of an option.
 * @group Props
 */
@Input() optionLabel: string | ((item: any) => string) | undefined;

field must be omitted in this case, otherwise it will be used instead.

getOptionLabel(option: any) {
    return this.field || this.optionLabel ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option && option.label != undefined ? option.label : option;
}

[straiforos]

@bluesbroz This is the workaround that I am using. I do not like that it requires an additional property or class method to display something that should and could be defined in the template.

[straiforos]

At this point I am now using item templating and toString on my classes since it works well. I would like the templating to work for selected item while not in multi-select mode since my work had a use-case for tabular data display which is not possible via string.

[cetincakiroglu]

Hi all,

For now selectedItem template is only supported in multiple mode. I've updated the issue title and added it into 17.Future milestone. We'll add selectedItem support for single mode in the future.