Strange behaviour of ion-textarea with auto-grow

Hi there,

I use <ion-textarea> with auto-grow function in a modal component in Ionic v4.
On my page I need to set up height of content in relation to body.clientHeight dynamically when loading. If I first open the modal, everything works fine. But the second time, style=“height:0” of the <textarea> within the <ion-textarea>.

You’re probably going to need to show us some code so we can see what you mean? (e.g. what “second time” ??)

Thanks you for reply.


  <ion-toolbar id="footerToolbar" style=" position:fixed;bottom:0;z-index:20;--background:#f4f5f8">
        <ion-textarea auto-grow="true" id="textbar" lines="none" type="text" rows="1" [(ngModel)]="msg" placeholder="Message"></ion-textarea>


export class ChatComponent implements OnInit {

bodyHeight = document.body.clientHeight;
distanceTop: number;
minimumHeight: number;
footer: any;
footerToolbar: any;


      this.footerToolbar = document.getElementById('footerToolbar');
      this.footer = document.querySelector('ion-footer');

        if (this.footerToolbar.clientHeight !== 0) {
          this.divTopHeight = this.bodyHeight -  (2 * this.footerToolbar.clientHeight)
          this.divDockedHeight =  this.bodyHeight / 2.5 - this.footerToolbar.clientHeight - 30;
 = this.divDockedHeight  + 'px';

          this.minimumHeight = this.footerToolbar.clientHeight + 30 //height of drawer bar;
          this.distanceTop = this.footerToolbar.clientHeight;

      else {  setTimeout(()=>{this.checkToolbarHeight()},100);


“The second time” is, if I reopen the modal, the behaviour of the ion-textarea changes. The second time, the textarea inside seems to be a bit lower placed. But every time the developer tool tells me textarea inside of ion textarea has a set hight of 0px. When I force the size of the textarea with a function like this:

@ViewChild(IonTextarea, {static:false}) ionTextarea: IonTextarea;
     this.textArea = this.ionTextarea.getInputElement();
      if(this.textArea['__zone_symbol__value'].style !== undefined ){
        this.textArea['__zone_symbol__value'].style.height = "39px";
        setTimeout(()=> {if(this.textArea['__zone_symbol__value'].style.height==0){
      } else {

it kind of works. Also when I click on the ion-textarea field, textarea gets focused and everything works fine.

Yeah, I think you might be stuck with a lot of experimentation needed there? These couple of generic questions might (?) give you a clue to help…The second one has an “Angular” solution, but no idea if it is still relevant, or what is going to happen the second time :slightly_smiling_face:

Thank you. So with the little workarround it works fine, still don’t know whats happening.

      return this.ionTextarea.getInputElement().then((element) => {
        if( == '0px'){
         return = 'auto';
        } else {
          setTimeout(()=> this.checkTextarea(),100)};