autocomple multiple : can't display labels

[stephane-tessier]

Describe the bug

When using autocomplete with multiple = true and objects like [{label: 'toto', value: {}}], the selected items cannot display their labels properly :

<li
                    #token
                    *ngFor="let option of modelValue(); let i = index"
                    [ngClass]="{ 'p-autocomplete-chip-item': true, 'p-focus': focusedMultipleOptionIndex() === i }"
                    [attr.id]="id + '_multiple_option_' + i"
                    role="option"
                    [attr.aria-label]="getOptionLabel(option)"
                    [attr.aria-setsize]="modelValue().length"
                    [attr.aria-posinset]="i + 1"
                    [attr.aria-selected]="true"
                >

let option of modelValue() is wrong : it's not an option (label+value) but only a value. This should be renamed as value, and a function similar to inputValue() should be used to fetch the selected options among the options list

BR

Pull Request Link

No response

Reason for not contributing a PR

• [X] Lack of time
• [X] Unsure how to implement the fix/feature
• [X] Difficulty understanding the codebase
• [ ] Other

Other Reason

No response

Reproducer

x

Environment

prime 18.0.2

Angular version

18.0.2

PrimeNG version

v18 (LTS Only)

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

use an autocomplete with complexe objects

Expected behavior

labels should display properly

[davidda]

Can you provide a stackblitz reproducer? I think have this scenario in my application and it works fine. You have to set the [optionLabel] property of the p-autocomplete.

[github-actions[bot]]

Due to PrimeTek's demanding roadmap for PrimeNG, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

[github-actions[bot]]

More information is needed to find a solution. A runnable StackBlitz example and additional details would be helpful.

[petogriac]

@davidda but not only that , also optionValue="value" needs to be set since the default is different

[stephane-tessier]

https://stackblitz.com/edit/stackblitz-starters-uppvnx3z?file=src%2Fapp%2Fapp.component.ts

[BeGj]

Bump

[WillBoig]

We have the same issue on our apps and this makes it impossible to finalize the upgrade to primeng19. I confirm that the stackblitz linked by @stephane-tessier reproduces the exact issue we have.

[WillBoig]

The issue is still present in primeng 19.0.10. I have updated the stackblitz of @stephane-tessier to show that it does not work with multiple attribute or without it :

https://stackblitz.com/edit/stackblitz-starters-gdwelehl?file=src%2Fapp%2Fapp.component.html

[WillBoig]

Is there anyone from the dev teams that looks at issues on this repo ??

[ryann3588]

A work around I found to work is to map the select item to itself i.e.

{ label: '', value: '', item: { label: '', value: '' }}

Then set optionValue="item"

[gmaggio-ca]

Same problem reproduced with primeng demo: https://7xfmvtbs.stackblitz.io

[gmaggiodev]

Yesterday, created a pull request that fix the issue.

Please review asap: https://github.com/primefaces/primeng/pull/18044

[filiptrivan]

I just had to change the 'value' field to anything else, it took me two hours to figure out...

Example Stackblitz (forked from @stephane-tessier).

[rlittolff-rofim]

6 months without a fix ?! There is a PR but nobody merge it.

Please fix this quickly.

In the meantime, we're using ryann3588's work around

[mertsincan]

Fixed for next version.

@gmaggiodev could you please check the fix? Thanks a lot!

[gmaggio-ca]

Fixed for next version.

@gmaggiodev could you please check the fix? Thanks a lot!

@mertsincan I've just tested it using the showcase extension with problem use case that I wrote in my PR (https://github.com/primefaces/primeng/pull/18044) but it works partially. I still have a problem when passing initially the selection array (as array of codes). It doesn't resolve its labels:

I can do a PR with new showcase docs to make easier for you reproducing the cases (or you can pick it from my PR).

Let me know