p-dropdown float label overlaps input when selected value is 0

[MaksymShchukin]

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)
https://stackblitz.com/edit/github-cvtkcm

Current behavior
Float label overlaps with dropdown when selected value is 0 (possibly all falsy values behave this way)
https://prnt.sc/1310ep8

Expected behavior
Float label does not overlap with dropdown when selected value is 0

Minimal reproduction of the problem with instructions

1. Install primeng .
2. Add dropdown with float label to the page
3. Configure dropdown options to contain item with value === 0

https://stackblitz.com/edit/github-cvtkcm

What is the motivation / use case for changing the behavior?

We have dropdowns where list of items may contain 0

Please tell us about your environment:

Windows 10, VS Code, npm

• Angular version: 11.0.9
• PrimeNG version: 11.4.2
• Browser: Chrome 90, Edge, Firefox 88
• Language: TypeScript 4.0.2

[Jonnyprof]

Yes, same here.
It doesn't put p-inputwrapper-filled class if have selected a falsy value.

primeng/src/app/components/dropdown/dropdown.ts

Line 151 in 221ee7f

'[class.p-inputwrapper-filled]': 'value',

[rafa-suagu]

@yigitfindikli do you accept PR for this bug?

[rafa-suagu]

@yigitfindikli do you will apply this fix to the v11 version?

[IlliaFrantsevskyi]

Hello @yigitfindikli!

We need this fix in 11 version of primeng, since we are using Angular 11 and not able to upgrade it now.

Could you please release 11.4.6 as soon as possible?

Thank you.

[scastaldi]

If you are still in Angular 11 (or any version before primeng fix) this is how I was able to fix it...

<label for="state" [ngClass]="{ 'p-inputwrapper-filled-label': address.stateId > -1 }">State </label>

[awsdevelopvn]

I fixed the issue by setting the property [autoDisplayFirst]="false"
Something like this

<p-dropdown inputId="customerAddress" [autoDisplayFirst]="false" [options]="selectedCustomer.deliveryAddresses" [(ngModel)]="order.deliveryAddressId" optionLabel="address" optionValue="id" name="customerAddress" styleClass="text-bold"></p-dropdown> <label for="customerAddress">{{"DeliveryAddress" | localize}}</label>