AutoComplete: Broken since PrimeNG 17.15.0 due to the new `optionValue` support

[ThoSap]

Describe the bug

Since PrimeNG 17.15.0 the AutoComplete display is broken due to the new optionValue support. In PrimeNG 17.14.0 wrapping an item in a SelectItem works and the selected item is displayed, but since PrimeNG 17.15.0 only [object Object] is displayed when an item is selected.

This bug was introduced with: https://github.com/primefaces/primeng/issues/14599 https://github.com/primefaces/primeng/pull/15309

Environment

StackBlitz - PrimeNG AutocompleteReactiveFormsDemo broken selected item display

Reproducer

https://stackblitz.com/edit/yzm5ng?file=src%2Fapp%2Fdemo%2Fautocomplete-reactive-forms-demo.ts,src%2Fapp%2Fdemo%2Fautocomplete-reactive-forms-demo.html,package.json%3AL13-L13

Angular version

17.3.6 and 17.3.1 (from StackBlitz)

PrimeNG version

17.15.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.11.1

Browser(s)

Microsoft Edge 124.0.2478.67

Steps to reproduce the behavior

Wrap the suggestion items in a PrimeNG SelectItem as it was done in StackBlitz - PrimeNG AutocompleteReactiveFormsDemo broken selected item display

Expected behavior

It should work the same as it worked in PrimeNG 17.14.0: See StackBlitz - PrimeNG AutocompleteReactiveFormsDemo working in PrimeNG 17.14.0

[sandrotonon]

You can add optionValue="label" to the autocomplete-config to show the label as value. See StackBlitz Demo.

[ThoSap]

I know, but in my case I need the whole SelectItem object or at least the SelectItem.value object, not only the label (the label is a computed field as you can see in my StackBlitz example).

It clearly worked before with PrimeNG 17.14.0.

[yorickp]

Feels related to https://github.com/primefaces/primeng/issues/15495 (context there is [multiple]=true).

For those in search for a temporary potential workaround (as I agree on this being a bug), the same might work for this context (with [multiple]=false):

Add:

[optionValue]="optionValueFn"

to the p-autoComplete, with optionValueFn being initialised as:

optionValueFn = (option) => option as any

More details can be found here: https://github.com/primefaces/primeng/issues/15495#issuecomment-2129877537.

Curious whether this helps others in the meantime.

[ThoSap]

@yorickp your workaround works. Maybe @sandrotonon will look into his PR again and fix this issue.

[joinsaturn]

Maybe can Help, do not use a mix o optionValue and optionLabel when you use an object.

This is something that wasn't clear to me when I read that the field was deprecated

If you use an object like actor={key: 1, name: 'super mario'} in version 17.15 I used Field as suggested.

Just an idea of example: <p-autoComplete dataKey="key" field="name" formControlName="actorControlName"

console.log(form.get('actorControlName')?.value); {key: 1, name: 'super mario'}

Now field is deprecated and Primeng doc suggest to use optionLabel /** * Field of a suggested object to resolve and display. * @group Props * @deprecated use optionLabel property instead */

Just an idea of example: <p-autoComplete dataKey="key" optionLabel="name" formControlName="actorControlName" .............

[pete-mcwilliams]

It's a breaking change introduced in a minor patch, needs a fix.

[ThoSap]

@joinsaturn I didn't use optionValue or optionValueFn with optionLabel when updating to PrimeNG 17.15.0, I also never used the field input property, still, my AutoComplete completely stopped working as shown in this issue.

This has to be fixed.

[sandrotonon]

@yorickp your workaround works. Maybe @sandrotonon will look into his PR again and fix this issue.

I'm currently working on a fix for this and #15495 and will create a new PR.