bug: Autogrow property in IonTextArea doesnt look good

Bug Report

Ionic version:

[x] 5.1

Current behavior: When I initialize the value of a text area the label doesnt look good

Expected behavior: Need to auto expand if I set property autogrod = true

Steps to reproduce:

Set a value to textArea component

Related code:

<IonItem>
            <IonLabel position="stacked">Beneficios</IonLabel>
            <IonTextarea 
              className="inputs"
              placeholder={benefits}
              autoGrow={true}
              maxlength={400}     
              value={benefits}
              rows={6} cols={20}
              onIonChange={e => setBenefits(e.detail.value!)}>
            </IonTextarea>
 </IonItem>

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.8.0 (/Users/timugo/.nvm/versions/node/v12.16.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.1.0

Capacitor:

   Capacitor CLI   : 2.1.0
   @capacitor/core : 2.1.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.0 (/Users/timugo/.nvm/versions/node/v12.16.0/bin/node)
   npm    : 6.14.4
   OS     : macOS Mojave

[svmszcck]

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.

[EinfachHans]

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 😕