Dropdown: Preselected value not shown when using reactive forms

[Timmeeeey]

Describe the bug

When using reactive forms with an initial value this value is not shown in the dropdown.
It shows only after clicking on the dropdown.

Environment

Windows, Edge

Reproducer

https://stackblitz.com/edit/z2vojt

Angular version

17.0.0

PrimeNG version

17.0.0-beta.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.9.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[jerkovicl]

@Timmeeeey same issue here
even if your value is set during creating of form like this: new FormControl(value here), dropdown will not show selected value initially, it will only show it after dropdown click

[jerkovicl]

@Timmeeeey another thing, if you remove ? from selectedItem template value will be shown in dropdown but we will get error in console about item being null in selectedItem template
reproducer here:

[chaeller]

I have the same problem

PrimeNg 17.0.0-rc.1 = not OK
https://stackblitz.com/edit/uzpr21-z8gmpt

PrimeNg 17.0.0-beta.1 = not OK
https://stackblitz.com/edit/uzpr21-dhskbu

PrimeNg 16.9.1 with Angular 17 = not OK
https://stackblitz.com/edit/uzpr21-dpm6ab

PrimeNg 16.9.1 with Angular 16 = OK
https://stackblitz.com/edit/cnmrtn-bw3sgn

[jerkovicl]

@cetincakiroglu any updates on this? did you check reproducers?

[jerkovicl]

@cetincakiroglu tested with latest version v17.0.0, this is still not working, reproducer
check the error in console

[cetincakiroglu]

Thanks for the reproducer, we'll check and identify the issue.

[aturoczy]

I have the same issue. Last 2 days I tried to debug it, and finally found this thread :) The only "workaround" that I found to bind the value into the ngModel as well. But it is definitely a breaking change that the Angular 17 brought.

[jerkovicl]

@cetincakiroglu this should be reopened, since issue is still there even with 17.1.0 fix
Reproducer

[aturoczy]

I'm going to try it soon with the new version. But yes, in the release notes this fix is there.

[cetincakiroglu]

@cetincakiroglu this should be reopened, since issue is still there even with 17.1.0 fix Reproducer

Are you sure? Your example is working actually, I didn't change anything just opened the example you've shared above.

[jerkovicl]

@cetincakiroglu this should be reopened, since issue is still there even with 17.1.0 fix Reproducer

Are you sure? Your example is working actually, I didn't change anything just opened the example you've shared above.

Check the error in console

[cetincakiroglu]

@cetincakiroglu this should be reopened, since issue is still there even with 17.1.0 fix Reproducer

Are you sure? Your example is working actually, I didn't change anything just opened the example you've shared above.

Check the error in console

It's another issue, I'll create a new issue for it, thanks a lot for reporting

[jerkovicl]

@cetincakiroglu ok thats fine

[rburgst]

I still have occasional instances of the pre-selected item not showing up, however, its not trivial to reproduce.

[rburgst]

the problem seems to happen when initially the list of options if undefined. Will try and create a repro

[yassine-fy94]

The filterBy option is not working...

[xeexthemoth]

I've found a crazy work around... if you add virtual scroll to the component then it works!
e.g.
<p-dropdown
..
..
..
[virtualScroll]="true"
[virtualScrollItemSize]="10"

[xeexthemoth]

found a better hack!
last thing in your init

        setTimeout(() => {
            const originalValue = this.myForm.controls['myDropDownName'].value;
            this.myForm.controls['myDropDownName'].setValue('');
            this.myForm.controls['myDropDownName'].setValue(originalValue);
        });

seems to need to set value to an empty string first otherwise it doesn't work... so very strange... it is like the dropdown isn't updating its on screen paint once everything has completed... maybe a zone file bug in angular or a weird bug in primeng dropdown...

[GrantLiang]

https://stackblitz.com/edit/xdzkrc

In the above example, using Float Label
but No.3 case push item into options then the selected option will disappear

primeng : v17.14.1