optionValue of p-dropdown is not properly working

[BrayanDevM]

The issue

The optionValue of the component is not working correctly. I performed a version migration from PrimeNG 15 to 16.7.2, and immediately the dropdowns that receive an object but have their value and label specified stopped working. They are displayed correctly, but when selecting an option, the dropdown remains empty, and in the HTML, the value "empty" appears.

Code

form = this.fb.nonNullable.group({
  identificationTypeId: [1, [Validators.required]],
  identification: ['', [Validators.required, Validators.pattern(/^[0-9]*$/)]]
});

identificationTypeList = [
  { id: 1, shortName: 'CC', description: 'Cedula de ciudadania' },
  { id: 2, shortName: 'CE', description: 'Cedula de extranjeria' }
];

<p-dropdown
  optionValue="id"
  optionLabel="description"
  formControlName="identificationTypeId"
  [options]="identificationList"
></p-dropdown>

[ghost]

A solution for this is to keep your options array with just {label : " ", value : " " } and remove optionValue and optionLabel attributes it'll default use label and value

[trumannaq]

It looks like the issue you’re facing with p-dropdown after upgrading from PrimeNG 15 to 16.7.2 could be related to a change in how the optionValue and optionLabel properties are handled in the newer version.

A few things to check and try:

Binding optionValue and optionLabel: In your code, you're binding optionValue="id" and optionLabel="description". Make sure that the identificationList (should be identificationTypeList based on your array name) has the correct structure. It should have objects where id and description are valid properties. If the property names don’t match exactly (case-sensitive), this could cause issues.
example:
identificationTypeList = [
{ id: 1, shortName: 'CC', description: 'Cedula de ciudadania' },
{ id: 2, shortName: 'CE', description: 'Cedula de extranjeria' }
];

[cetincakiroglu]

Hi,

Could you please share a stackblitz example so we can identify the issue clearly?

[SpiderPork]

Here it is!

https://stackblitz.com/edit/rxgqkz?file=src%2Fapp%2Fdemo%2Fdropdown-basic-demo.ts

[cetincakiroglu]

Hi,

This issue is fixed in here primefaces/primeng#14095 and the fix will be available on upcoming release