Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ion-label does not float properly with ion-textarea #17555

Closed
rianne-pagtalunan opened this issue Feb 21, 2019 · 11 comments

Comments

6 participants
@rianne-pagtalunan
Copy link

commented Feb 21, 2019

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
image

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

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

@ionitron-bot ionitron-bot bot added the triage label Feb 21, 2019

@akki-jat

This comment has been minimized.

Copy link

commented Mar 2, 2019

Hi @rianne-pagtalunan, facing the same problem. Got any solution?

@rianne-pagtalunan

This comment has been minimized.

Copy link
Author

commented Mar 4, 2019

hi @akki-jat, still nothing. I've switched to using fixed/stacked labels when text-area has a value as a temporary workaround.

@akki-jat

This comment has been minimized.

Copy link

commented Mar 7, 2019

@rianne-pagtalunan I am using a hack. Just disable then set value and enable the textarea JS/TS code.

@MaxiAringoli

This comment has been minimized.

Copy link

commented Mar 27, 2019

Same problem

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Apr 11, 2019

Thanks for the issue! I believe this is related to Angular forms. Could you test to see if it works setting the value with ngModel?

@mburger81

This comment has been minimized.

Copy link
Contributor

commented Apr 12, 2019

We did this

<ion-list>
    <ion-item>
        <ion-label position="floating">Test 1</ion-label>
        <ion-textarea clearInput></ion-textarea>
    </ion-item>
    <ion-item>
        <ion-label position="floating">Test 2</ion-label>
        <ion-textarea clearInput value="YES"></ion-textarea>
    </ion-item>
    <ion-item>
        <ion-label position="floating">Test 3</ion-label>
        <ion-textarea clearInput [value]="angular"></ion-textarea>
    </ion-item>
    <ion-item>
        <ion-label position="floating">Test 4</ion-label>
        <ion-textarea clearInput [value]="angularAsync"></ion-textarea>
    </ion-item>
    <ion-item>
        <ion-label position="floating">Test 5</ion-label>
        <ion-textarea clearInput [(ngModel)]="angularNgModel"></ion-textarea>
    </ion-item>
    <ion-item>
        <ion-label position="floating">Test 6</ion-label>
        <ion-textarea clearInput [(ngModel)]="angularAsyncNgModel"></ion-textarea>
    </ion-item>
</ion-list>

And this is the result:
image

As you can see if using angular or ngmodel binding which is async the floating label is not working. All the other use cases are working

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Apr 12, 2019

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.

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Apr 12, 2019

brandyscarney added a commit that referenced this issue Apr 12, 2019

fix(textarea): float label when a value is changed async
emits styles to the parent item on value change so that the item will get the proper class to float the label

fixes #17555 fixes #17559
@brandyscarney

This comment has been minimized.

Copy link
Member

commented Apr 12, 2019

That was definitely the problem, submitted a pull request with the fix: #18024

Ionic Core automation moved this from Backlog 🤖 to Done 🎉 Apr 12, 2019

brandyscarney added a commit that referenced this issue Apr 12, 2019

fix(textarea): float label when a value is changed async (#18024)
emits styles to the parent item on value change so that the item will get the proper class to float the label

fixes #17555 fixes #17559
@gisngocthach

This comment has been minimized.

Copy link

commented Apr 18, 2019

Try with value=" ". It should be working.

@mburger81

This comment has been minimized.

Copy link
Contributor

commented Apr 18, 2019

version 4.3.0 definitely resolves the issue for us

Kiku-git added a commit to Kiku-git/ionic that referenced this issue May 16, 2019

fix(textarea): float label when a value is changed async (ionic-team#…
…18024)

emits styles to the parent item on value change so that the item will get the proper class to float the label

fixes ionic-team#17555 fixes ionic-team#17559
@ionitron-bot

This comment has been minimized.

Copy link

commented May 18, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 18, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.