p-dropdown with editable=true and floating labels results in incorrect behavior with manually entered values

[nicholas-ochoa]

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

Current behavior
When adding the [editable]="true" property to the component and using float labels, the p-inputwrapper-filled class is not added to the <p-dropdown> element when a value is typed in and not selected from the drop down list of values. When selecting from the drop down, p-inputwrapper-filled is added to the <p-dropdown> element. This causes the floating label to consider the field "empty" and the label expands and occupies the same space as the field value.

Reproduction on stackblitz: https://stackblitz.com/edit/github-sijlth-evusyx?file=src/app/app.component.html

Expected behavior
<p-dropdown> with [editable]="true" should behave the same when manually typing a value as when selecting a value from the drop down list with regards to the addition / removal of the p-inputwrapper-filled class on the <p-dropdown> element.

What is the motivation / use case for changing the behavior?
The component does not work as expected when [editable] is enabled.

Please tell us about your environment:

• Angular version: 11.2.10

• PrimeNG version: 11.4.0

• Browser: Chrome 90

• Language: TS 4.2.4