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

floating ion-textarea not floating up #17559

Closed
jtushar53 opened this issue Feb 21, 2019 · 10 comments

Comments

Projects
None yet
4 participants
@jtushar53
Copy link

commented Feb 21, 2019

Bug Report

Ionic version:

[x] 4.x

Current behavior:
using ion-textarea floating in reactive form, while updating form using patchValue floating placeholder is not moving up. maybe the issue is also with ion-input

Expected behavior:
Floating placeholder should move up if value is set into the field programatically
Steps to reproduce:

  1. create a reactive form in ts file
  2. add ion-textarea in the html
  3. add value to the form using patchValue (didn't tried it with setValue, currently my json has additional fields) in ngOnInit or ionViewDidEnter

Related code:

**HTML**
<form [formGroup]="adminForm">
 <ion-item>
            <ion-label position="floating">Remarks</ion-label>
            <ion-textarea rows="6" formControlName="remarks"></ion-textarea>
  </ion-item>
</form>

**TS**
inside ngOnInit
 this.adminForm = this._fb.group({
        remarks: ['', Validators.required]
    });

inside ionViewDidEnter or ngOnInit
 this.adminForm.patchValue({remarks : 'test remarks'});
      this.adminForm.updateValueAndValidity();


Other information:
Below is the screenshot, ion-textarea is having ion-label as Remarks with value test
image

Is should look like below

image

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.13.1
   @angular-devkit/schematics    : 7.3.1
   @angular/cli                  : 7.3.1
   @ionic/angular-toolkit        : 1.3.0

System:

   NodeJS : v10.15.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS Mojave

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

@hsnbrji

This comment has been minimized.

Copy link

commented Feb 25, 2019

I have the same issue as well. Did you manage to fix this @jtushar53 ?

@jtushar53

This comment has been minimized.

Copy link
Author

commented Feb 27, 2019

as of now i am using below workaround

  <ion-col>
            <ion-item lines="none">
              <ion-label
                position="{{
                  adminForm.controls['remarks'].value ? 'stacked' : 'floating'
                }}"
                >Remarks</ion-label
              >
              <ion-textarea
                #textarea
                rows="6"
                formControlName="remarks"
              ></ion-textarea>
            </ion-item>
          </ion-col>

Where adminForm is the formgroup

@mburger81

This comment has been minimized.

Copy link
Contributor

commented Apr 4, 2019

@liamdebeasi we have have the same issue, very similar to #17851

@mburger81

This comment has been minimized.

Copy link
Contributor

commented Apr 4, 2019

@jtushar53 please rename the issue, the problem is for ion-textarea and not for ion-input, you also describe in your issue that the problem is textarea ;)

@jtushar53 jtushar53 changed the title floating ion-input not floating up floating ion-textarea not floating up Apr 5, 2019

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Apr 11, 2019

Thanks for the issue! Is this a duplicate of #17555?

@ionitron-bot ionitron-bot bot removed the triage label Apr 11, 2019

@mburger81

This comment has been minimized.

Copy link
Contributor

commented Apr 11, 2019

@brandyscarny I think you set the needs replay label on the wrong issue, your intention was probably to set it to #17555 😊

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels Apr 11, 2019

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Apr 11, 2019

@mburger81 No I wanted the reply of if this was a duplicate 😁

@mburger81

This comment has been minimized.

Copy link
Contributor

commented Apr 11, 2019

Ok sorry, yes IMO this is a duplicate, tomorrow I'll do the test with ngmodel

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Apr 11, 2019

Haha okay, thank you! I will close this one then.

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 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
@ionitron-bot

This comment has been minimized.

Copy link

commented May 11, 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 11, 2019

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
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.