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.

component.html:

<ion-footer>    
  <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>
  </ion-toolbar>
</ion-footer

component.ts:

export class ChatComponent implements OnInit {


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

constructor(){

  ngOnInit(){
      this.setFooterAndDrawer();
  }
  setFooterAndDrawer(){
      this.footerToolbar = document.getElementById('footerToolbar');
      this.footer = document.querySelector('ion-footer');
      this.checkToolbarHeight();
  }

  checkToolbarHeight(){
        if (this.footerToolbar.clientHeight !== 0) {
          this.divTopHeight = this.bodyHeight -  (2 * this.footerToolbar.clientHeight)
          this.divDockedHeight =  this.bodyHeight / 2.5 - this.footerToolbar.clientHeight - 30;
          this.ionDrawerSelector.style.height = 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;
(...)
checkTextarea(){
     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){
          this.checkTextarea()
        }},1000);
        
      } else {
        setTimeout(()=>this.checkTextarea(),100)
      }
}

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.

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