p-dropdown: Setting value from reactive form with dataKey attribute does not work properly

[nestorcamacho]

Describe the bug

In version 16.7.2 the p-dropdown component does not work correctly when a patchValue is made only with the dataKey attribute. The dropdown seems to recognise the option to select but does not display any text. It works correctly if the complete object is defined in the patchValue.

The option is selected but does not show the label.

Environment

Windows 10

Reproducer

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

Angular version

16.2.0

PrimeNG version

16.7.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

No response

Steps to reproduce the behavior

1. Creation of a dropdown in a reactive form with dataKey attribute .

<p-dropdown
      formControlName="city"
      [options]="cities"
      optionLabel="name"
      dataKey="code"
></p-dropdown>

2. Defining the dropdown options objects.

this.cities = [
      { name: 'New York', code: 'NY' },
      { name: 'Rome', code: 'RM' },
      { name: 'London', code: 'LDN' },
      { name: 'Istanbul', code: 'IST' },
      { name: 'Paris', code: 'PRS' },
    ];

3. Define the form

this.formGroup = new FormGroup({
      city: new FormControl<City | null>(null),
    });

3. Making a patchValue of the form only with the dataKey property defined in the dropdown.

this.formGroup.patchValue({ city: { code: 'IST' } });

Expected behavior

Show the label when it is selected by dataKey as version 16.4.2.

Demo with PrimeNG 16.4.2

[cetincakiroglu]

Hi,

This issue is fixed with the 16.8.0, see the example below:

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