ion-label does not float properly with ion-textarea

Bug Report

Ionic version: [x] 4.x

Current behavior: When a default value is present for an ion-textarea, the ion-label does not float properly. Ion-item css styles shows the css class item-input instead of item-has-value. This behavior is observed using latest beta.16 of ionic/angular

The behavior corrects when focus has been applied to the ion-textarea.

Expected behavior: When an ion-textarea has a value, the label should float properly.

Steps to reproduce:

Related code:

<ion-list inset>
            <ion-item no-padding>
                <ion-label position="floating">Status</ion-label>
                <ion-select formControlName="status">
                    <ion-select-option value="New">New</ion-select-option>
                    <ion-select-option value="Processing">Processing</ion-select-option>
                    <ion-select-option value="Accepted">Accepted</ion-select-option>
                    <ion-select-option value="Rejected">Rejected</ion-select-option>
                    <ion-select-option value="Cancelled">Cancelled</ion-select-option>
                </ion-select>
            </ion-item>
            <ion-item no-padding>
                <ion-label position="floating">Incident Date</ion-label>
                <ion-datetime formControlName="incidentDate" displayFormat="DD MMM YYYY"></ion-datetime>
            </ion-item>
            <ion-item no-padding>
                <ion-label position="floating">Description</ion-label>
                <ion-textarea formControlName="description" type="text" rows="5" required="true"></ion-textarea>
            </ion-item>
</ion-list>

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.4.0
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

System:

   NodeJS : v8.12.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

[mburger81]

version 4.3.0 definitely resolves the issue for us

[brandyscarney]

Thanks so much @mburger81! That helps a lot. I confirmed that this happens to textarea with a setTimeout on it in core, without Angular. It does not happen to the ion-input. Here’s a Codepen reproducing it: https://codepen.io/brandyscarney/pen/XQgwJM

I’ll add it to the project. I think the problem is as simple as this.emitStyle() not being called on value change:

  @Watch('value')
  protected valueChanged() {
    const nativeInput = this.nativeInput;
    const value = this.getValue();
    if (nativeInput && nativeInput.value !== value) {
      nativeInput.value = value;
    }
    this.ionChange.emit({ value });
  }

I’ll take a quick look at this.