Ionic-angular ion-textarea's height shrink

Question

I'm coding with ionic-angular framework for some project. When I use ion-textarea, sometimes the textarea's height is decreased 0px. If the textarea code like that,

<ion-textarea class="translated"
  [value]="text">
</ion-textarea>

• nomal state

• shrink state

In shrink state case, the height of ion-textarea is normal but the div and textarea in the ion-textarea get somemthing wrong.

I want to know what is the cause of this situation and how to solve!!

please let me know what is the problem (I tested it in chrome browser)

Answer 1

<ion-textarea class="translated ion-padding"
rows='3'
</ion-textarea>

Answer 2

bad but works:

@ViewChild(IonTextarea, {static: false}) ionTextarea: IonTextarea;

async ngAfterViewInit(): Promise<void> {
  await this.checkTextarea();
}

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