Primeng: p-dropdown model binding not working inside ngif when Ivy enabled

[coffeymatt]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)

Apologies, this is a strange one and I've not figured out how to reproduce on stackblitz. I've tried here:

https://stackblitz.com/edit/github-455s6x?file=src%2Fapp%2Fapp.component.ts

But it seems to behave in this context. I'm using timeouts to simulate async http requests to simulate the nature of how the data/model is loaded, but not sure if this is effective?

Current behavior

I have a p-dropdown control bound with ngModel to an object on my component. It's been working fine for a long while, I've just hit this issue after upgrading to angular 9 and the latest primeNG.

<p-dropdown 
      *ngIf="isOwner"
      name="project" 
      [options]="projects"
      [optionLabel]="'label'" 
      [filter]="true" 
      [(ngModel)]="selectedProject" 
      [placeholder]="'Select a project'"
      required>
</p-dropdown>   

After the update, this dropdown renders the list of values, but doesn't have the selected value bound (so just shows the placeholder). When I select a value, the control goes to it's invalid state and nothing is bound.

If I move the control outside of the div it's in, which has an ngIf on it, it works perfectly. As soon as I wrap it in an ngIf block or apply an ngIf to it, it stops behaving and doesn't seem to want to model bind. There are no errors in the console.

If I disable ivy completely ("angularCompilerOptions": { "enableIvy": false }), it all starts working fine again.

Expected behavior

For the control to work fine with Ivy in my project within an *ngIf.

Minimal reproduction of the problem with instructions

I've tried my utmost to figure out what conditions are required to make this occur here:

https://stackblitz.com/edit/github-455s6x

But I've not been able to reproduce it. I can't think what would be different about my app running locally compared to stackblitz. Any ideas or things I could try are welcome.

Please tell us about your environment:
Windows 10, VS Code

• Angular version: 9.07

• PrimeNG version: 9.02

• Browser: Chrome

• Language: TypeScript 3.8.3

• Node (for AoT issues): node --version = v12.16.1

[cagataycivici]

Please use forum for support requests and questions.

[coffeymatt]

@cagataycivici How do I know this isn't a bug? It's only affecting primeng controls in my project.

[teuf22]

I encountered the same problem, after migrating to Angular 9. The p-dropdown have erratic behavior. Sometimes an empty list, sometimes an incorrect bound value. The observation above seems correct: it happens in conjunction with *ngIf. Could not reproduce in a small test case. The problems disappear when turning off Ivy. Verified with primeng 9.1.2 / angular 9.1.11

[coffeymatt]

I've just tried upgrading to angular 10, and 10-rc1 of prime and the problem was still there. I did a little experimenting and found changing

[optionLabel]="'label'"

to

optionLabel="label"

Seemed to fix my issue.

[scrimothy]

Just fyi, this is still an issue in [email protected]. @coffeymatt 's solution above works for hard-coded labels.

If you need to use a variable at this point for the option labels, it works with this format only:
optionLabel="{{ labelVariable }}"