Floating labels and placeholder text no longer play well together #17571
Description
Bug Report
Ionic version:
4.0.2
Current behavior:
It used to be possible to have both floating labels and placeholder text, over the same ion-input, like this:
<ion-item>
<ion-label position="floating">Password</ion-label>
<ion-input type="password" name="" autocomplete="current-password"
(ionFocus)="isPassFocus=true" (ionBlur)="isPassFocus=false" placeholder="{{(isPassFocus) ? 'Enter Password' : '' }}"></ion-input>
</ion-item>
But now setting placeholder text breaks floating labels. As soon as the placeholder text is set, floating labels no longer animate. Even if you remove the placeholder text, the floating labels stay broken.
Expected behavior:
I expect placeholder text and floating labels to live side by side in perfect harmony.
Steps to reproduce:
Either set the placeholder text in HTML statically, dynamically as the result of some event, or even programmatically in TypeScript - all roads leads to Rome (and broken floating labels).
Related code:
(See above)
Ionic info:
Ionic:
ionic (Ionic CLI) : 4.10.3 (/Users/admin/.nvm/versions/node/v8.9.4/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.2
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.4.0
Cordova:
cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : browser 5.0.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 5 other plugins)
System:
ios-deploy : 1.9.2
NodeJS : v8.9.4 (/Users/admin/.nvm/versions/node/v8.9.4/bin/node)
npm : 5.6.0
OS : macOS High Sierra
Xcode : Xcode 9.3 Build version 9E145