Floating labels and placeholder text no longer play well together

[senseijames]

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 (cordova-lib@8.1.1)
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

[liamdebeasi]

Hi there,

Thanks for opening an issue with us! We will look into this.

For reference, this is an example of the MD spec for floating label + input: https://material-components.github.io/material-components-web-catalog/#/component/text-field

The label spec (https://material.io/develop/web/components/input-controls/floating-label/) says Every Text Field and Select should have a label, except for full-width text fields, which use the input’s placeholder attribute instead.

[senseijames]

Any progress on this???

[sshipsey]

Still busted in 5.0.0

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.