Skip to content

[AutoComplete] optionLabel not applied to selected item if suggestions are strings #19075

@gianluca-moro

Description

@gianluca-moro

Describe the bug

For AutoComplete components, we can use optionLabel to display a custom label in the suggestions and selected item.
This works fine when the suggestions are objects but it does not work properly when the suggestions are just strings. In that case, the selected item does not display the label provided by optionLabel but just the value itself, while with objects, the selected item displays the label generated by optionLabel.

Image



Edit:
After some initial investigation of the source code, I saw in

inputValue = computed(() => {
const modelValue = this.modelValue();
const selectedOption = this.optionValueSelected ? (this.suggestions || []).find((option: any) => equals(option, modelValue, this.equalityKey())) : modelValue;
if (isNotEmpty(modelValue)) {
if (typeof modelValue === 'object' || this.optionValueSelected) {
const label = this.getOptionLabel(selectedOption);
return label != null ? label : modelValue;
} else {
return modelValue;
}
} else {
return '';
}
});
and
get optionValueSelected() {
return typeof this.modelValue() === 'string' && this.optionValue;
}
that the optionLabel is only applied to the selected item if the value is an object or if it's a string and the optionValue property is set.
But this does not really make sense to me since why would you set optionValue if the value is a string??
I think the logic in the inputValue signal computation is flawed. In my opinion, optionLabel should always be applied, no matter the type of the value.

So, apparently there is a workaround to fix this issue: Add an optionValue function that just returns the item itself, aka:

optionValue(item: any): any {
  return item;
}

Pull Request Link

#19076

Reproducer

https://stackblitz.com/edit/dz8njim1-jg7bfq1g?file=src%2Fapp%2Fautocomplete-objects-demo.html

Environment

PrimeNG 20.3.0, Angular 20, Firefox

Angular version

20.0.4

PrimeNG version

v20

Browser(s)

Firefox

Steps to reproduce the behavior

  1. Go to https://stackblitz.com/edit/dz8njim1-jg7bfq1g?file=src%2Fapp%2Fautocomplete-objects-demo.html
  2. The top AutoComplete uses an array of objects for the suggestions, while the bottom AutoComplete uses an array of strings
  3. The optionLabel function is the same for both and just returns test
  4. When we select and item in both AutoCompletes, the top one still displays test (which is intended behaviour) while the bottom one displays the actual value instead of test

Expected behavior

The selected item in AutoCopmlete component should always display the label generated by optionLabel no matter if the suggestions are objects or primitive types like strings.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions