p-dropdown: optionLabel not displayed if optionValue is filled

[Triskae]

Describe the bug

I use in our app p-dropdown with optionValue and optionLabel inputs. Since the last primeng update I does not work anymore. The dropdown is empty, even if I change by hand the selected value.

I don't have this problem with primeng 16.4.2.

Environment

"@amcharts/amcharts5": "^5.2.50",
"@angular/animations": "^17.0.3",
"@angular/cdk": "^17.0.1",
"@angular/common": "^17.0.3",
"@angular/compiler": "^17.0.3",
"@angular/core": "^17.0.3",
"@angular/fire": "^16.0.0",
"@angular/forms": "^17.0.3",
"@angular/google-maps": "^16.2.12",
"@angular/localize": "^17.0.3",
"@angular/platform-browser": "^17.0.3",
"@angular/platform-browser-dynamic": "^17.0.3",
"@angular/router": "^17.0.3",
"primeng": "^16.7.2",

Reproducer

https://stackblitz.com/edit/w3qrm1?file=src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.html&file=src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.ts

Angular version

17.0.3

PrimeNG version

16.7.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

21.2.0

Browser(s)

Chrome 118.0.5993.117

Steps to reproduce the behavior

Use the reactive form example in the documentation here: https://primeng.org/dropdown#reactive-forms
Add optionValue.

Expected behavior

I would expect the label for the options entry be visible, since it's not the case.

[cetincakiroglu]

This issue is fixed with the 16.8.0, please check the changelog we've addressed this and similar issues.

[Triskae]

Thanks tested and solved, thanks @cetincakiroglu

[pete-mcwilliams]

not fixed, breaking change if not able to specify optionValue then entire option will to be stored in ngModel (label and value) #14172

[Triskae]

What do you mean ? If you optionValue is not specified, it will store/return the entire object. @pete-mcwilliams

[pete-mcwilliams]

What do you mean ? If you optionValue is not specified, it will store/return the entire object. @pete-mcwilliams

correct, and that is a breaking change, imagine in the future you need to update the label. Not only do you need to update the options list, you will need to update every row in the database because you are not longer accessing the options by a key.

[Triskae]

I think it's the intended way, and if I remember, it worked like that since a very long time, but I'm maybe wrong

[pete-mcwilliams]

16.8.0 this should work allowing only the code to be persisted but does not as the template is only passed the optionValue.
https://stackblitz.com/edit/zkmdqg-buomly?file=src%2Fapp%2Fdemo%2Fdropdown-template-demo.html,package.json

16.4.2 working as it should same example as above with only primeng version change
https://stackblitz.com/edit/zkmdqg-ivcsef?file=src%2Fapp%2Fdemo%2Fdropdown-template-demo.html,package.json

[Triskae]

Hmm I think I don't understand where the problem is, sorry. I don't see any difference in the component behaviour. In both of the examples, you used optionValue, and when you print selectedCountry, selectedCountry will store the value in the field stored by the provided field name in optionValue. In the example "US" for example.

[pete-mcwilliams]

Sorry, should not have linked your issue to mine, it was a different problem with same description, as you are not using a template (pTemplate="selectedItem") to display the label you do not have the problem.

You can see in my 16.8.0 example the selected item is not displayed in the dropdown component.