Angular primeng drop down with float label render badly on first time

Issue

I have an angular application in where im using floating labels when i first load the component (a p-dialog) the floating labels are "falling down" to the select as shown in the image

here is the code im using

<div class="ui-g-12">
  <span class="ui-float-label">
    <p-dropdown [options]="categories" formControlName="category" [style]="{ width: '100%' }"></p-dropdown>
    <label>{{ 'products.category-name' | translate }}</label>
  </span>
</div>

this form is generated using the formBuilder and what i noticed is that if i call form.reset(), then on the next time the module is rendered nicely. Im not sure what is the source of the problem any ideas?

Solution

The issue seems to be related to the fact that when filling the form using patchValue or setValue, the dropdown filled property is not set to true you have to set it manually in the meanwhile

here is how

<p-dropdown [options]="invoiceStatus" formControlName="status" [style]="{ width: '100%' }" #ddStatus></p-dropdown>

and in the controller

@ViewChild('ddStatus')
  ddStatus: Dropdown;

and later when setting a value to the form call set the filled property this way this.ddStatus.filled = true; i hope they will fix it soon

Answered By - naoru