fix(textarea): properly adjust auto-grow textarea in scrolled content (#19776)

fixes #19193

core/src/components/textarea/textarea.tsx

@@ -21,6 +21,7 @@ export class Textarea implements ComponentInterface {
   private nativeInput?: HTMLTextAreaElement;
   private inputId = `ion-input-${textareaIds++}`;
   private didBlurAfterEdit = false;
+  private textareaWrapper?: HTMLElement;
 
   @Element() el!: HTMLElement;
 
@@ -191,13 +192,15 @@ export class Textarea implements ComponentInterface {
     this.runAutoGrow();
   }
 
-  // TODO: performance hit, this cause layout thrashing
   private runAutoGrow() {
     const nativeInput = this.nativeInput;
     if (nativeInput && this.autoGrow) {
       readTask(() => {
-        nativeInput.style.height = 'inherit';
+        nativeInput.style.height = 'auto';
         nativeInput.style.height = nativeInput.scrollHeight + 'px';
+        if (this.textareaWrapper) {
+          this.textareaWrapper.style.height = nativeInput.scrollHeight + 'px';
+        }
       });
     }
   }
@@ -310,29 +313,34 @@ export class Textarea implements ComponentInterface {
           [mode]: true,
         }}
       >
-        <textarea
+        <div
-          class="native-textarea"
+          class="textarea-wrapper"
-          ref={el => this.nativeInput = el}
+          ref={el => this.textareaWrapper = el}
-          autoCapitalize={this.autocapitalize}
-          autoFocus={this.autofocus}
-          disabled={this.disabled}
-          maxLength={this.maxlength}
-          minLength={this.minlength}
-          name={this.name}
-          placeholder={this.placeholder || ''}
-          readOnly={this.readonly}
-          required={this.required}
-          spellCheck={this.spellcheck}
-          cols={this.cols}
-          rows={this.rows}
-          wrap={this.wrap}
-          onInput={this.onInput}
-          onBlur={this.onBlur}
-          onFocus={this.onFocus}
-          onKeyDown={this.onKeyDown}
         >
-          {value}
+          <textarea
-        </textarea>
+            class="native-textarea"
+            ref={el => this.nativeInput = el}
+            autoCapitalize={this.autocapitalize}
+            autoFocus={this.autofocus}
+            disabled={this.disabled}
+            maxLength={this.maxlength}
+            minLength={this.minlength}
+            name={this.name}
+            placeholder={this.placeholder || ''}
+            readOnly={this.readonly}
+            required={this.required}
+            spellCheck={this.spellcheck}
+            cols={this.cols}
+            rows={this.rows}
+            wrap={this.wrap}
+            onInput={this.onInput}
+            onBlur={this.onBlur}
+            onFocus={this.onFocus}
+            onKeyDown={this.onKeyDown}
+          >
+            {value}
+          </textarea>
+        </div>
       </Host>
     );
   }