I have tried this approach until this bug is solved and it seems to be working(I am using Ionic Vue):

state.loading is false initially.

  <ion-item v-if="state.loaded">
    <ion-textarea
      placeholder="Blabla"
      class="input"
      :auto-grow="true"
      rows="5"
    ></ion-textarea>
  </ion-item>

 setTimeout(() => {
   state.loaded = true;
 }, 250);

You can decrease the timeout value but I think 250ms is acceptable.

Working Workaround

Until this is fixed, you can use this as a good Workaround:

define in global.scss:

.some-class {
  // see: https://github.com/ionic-team/ionic-framework/issues/21242
  textarea {
    min-height: 66px;
  }
}

Of course you can adjust the value, 66px fits perfect for my case 😊 Then you need to add this class to every textarea 😕

@EinfachHans Oh, thanks tell me. Today, I changed these:

<ng-container *ngIf="isReady">
   <ion-textarea [(ngModel)]="..." [autoGrow]="true">
</ng-container>

ionViewDidEnter {
  this.ready = true;
}

This work well. thanks.

Hi there,

Thanks for making PR. No need to ping us - we are aware of the PR. We will review it when we have time in the coming days and provide feedback.

If you would like to see this code added to Ionic Framework, I recommend creating a pull request.

Ok, little later I will create PR

If you would like to see this code added to Ionic Framework, I recommend creating a pull request.

@Sitronik That looks great thank you! @liamdebeasi would this likely be added to ionic?

@liamdebeasi Thank you. I tried to understand the reason of this bug but I did’t get it.

Btw I created a codepen example with this BUG demonstration - please enter any symbol in textarea and look that happens in emulator. And try to delete symbol - please look again. I would like to explane that this ‘bouncing’ thing started to show in all my apps in all pages where textarea is placed.

https://codepen.io/ivanov-developer/pen/wvzedPm

In ngOnInit if I do the following, it will show properly. This is a horrible hack, but it may help some folks:

@Input()
textEntry: { content: string }

ngOnInit() {
  this.formGroup = new FormGroup({
    content: new FormControl('',
      {
        validators: [
          Validators.required
        ]
      }
    )
  });

  // HACK: set values later, seems to trigger whatever ionic is waiting for
  setTimeout(() => {
    this.applyValues();
  }, 300);
}

applyValues() {
  this.formGroup.patchValue({ content: this.textEntry.content });
}

@liamdebeasi @brandyscarney i debugged a bit:

https://github.com/ionic-team/ionic-framework/blob/907cc7b159cb569b97df013327ea4d6a4586ec64/core/src/components/textarea/textarea.tsx#L224

nativeInput.scrollHeight is 0 if this bug happens. For me it happens in a Modal, seems to be the problem here in this Issue too if i look at the attached image. Maybe this is related to #22449 - there a property also could be zero (if the containing element is hidden). I think this cause problems in some more components if used in a modal or other can-be-hidden-elements 🤔

Does someone have a Workaround? This still appears in latest version…

No interests in solve this bug I think.

Still appears. Any Updates to this?