p-dropdown: with reactive form, preselected value break UI

[cervenf]

Describe the bug

When I modify demo from documentation : https://primeng.org/dropdown#reactive-forms
That I preselect value from cities (this.cities[0]), then dropdown looks broken.
When I use p-dropdown outside form (via ngmodel) and it works correctly.

export class DropdownReactiveFormsDemo implements OnInit {
cities: City[] | undefined;

formGroup: FormGroup | undefined;

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

    this.formGroup = new FormGroup({
        selectedCity: new FormControl<City | null>(this.cities[0])
    });
}

}

dropdown looks like this:

Environment

windows 11

Reproducer

No response

Angular version

17.1.2

PrimeNG version

17.5.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[Kombuchelada]

I'm experiencing this issue as well. It's preventing me from upgrading my applications to v17. It appears for me most often when I use reactive forms, and attempt to patch in a value.

[cervenf]

@Kombuchelada is version 16 working correctly, please? Should I downgrade? Do you please know how fast tickets like this are fixed?
I'm new to primeng. Thank you.

[stevenpotts]

@cervenf if you are getting the same thing as me, then no, it doesn't work in 16 or 17, this has held me back to Angular 15 for so long now :( it gets harder and more problematic to upgrade the more versions of angular there are, and yet using Prime NG is really making things awkward now, its a lot of work to move away from it in my application, but waited months and we have not heard anything.
I don't think I am doing anything wrong? it works fine in v15.
The value gets stored in the form value fine, but the dropdown loses the selected value label.

My only option is waiting, or maybe finding a third party dropdown component.
here you can see the broken one when selected, and the one with its placeholder before selection.

<p-dropdown styleClass="w-100" formControlName="producerOption" [options]="ddlProducerOptions" optionValue="_id" optionLabel="contactKnownas" placeholder="Producer:" (onChange)="onProducerSelected($event)" [filter]="true" filterBy="contactKnownas" [showClear]="true" > </p-dropdown>

[MaciejSzczurek]

This error occurs for many developers, myself included. It is related to the programmatic setting of the form value, which destroys the user interface. A simple example edit shows what this error looks like. A quick workaround for this problem is to reset this value and set it again with some delay, but this is a very ugly solution.

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

[stevenpotts]

yes i see your right about the reset value thing, the first one i select is broken, if i change it again it works.

Just had a look, i have 79 instances of <p-dropdown in this app :D

[stevenpotts]

Maybe some good news for you guys.
17.3.1 works for me -- when the latest 17.5.0 does not!

so if you want to try this if you need angular 17 like me, then
uninstall with npm uninstall primeng
then install with npm i [email protected]

[jacqueslareau]

I don't know what's recently happening with the PrimeNG team, but the quality of each releases is really doing down, to say the least. The dropdown component is a great example. This component should pretty much be feature locked and stable, but each version is buggy.

I don't mean to be rude, and I know how hard software development can be. But I think there's something wrong with the release workflow or cycle. It's really seems to be rushed out.

[stevenpotts]

agree, it has to be some issues with versioning and how different members of team are working off it i presume.
v16 was always broken for me, i could never get it to work, then it appears they fixed it for early versions of 17 then its broke again in 17.5, in what looks like to be exactly the same problem.

[rafparedis]

I also have this issue. Reactive form and initial value set in the form definition v17.5

[rbbp23]

Yep, broken here as well.
It seems the dropdown and autocomplete components get more and more side effects with each release :(

[biswasSaumyadip]

In version 17.6 the dropdown is working fine.

[cetincakiroglu]

Hi,

This issue is fixed and doesn't exist in v17.6.0, you can see here https://stackblitz.com/edit/oewvp1?file=src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.ts

Closing the issue since it's invalid with the latest version. Thanks for reporting the issue.