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';
+        }
       });
     }
   }
@@ -309,6 +312,10 @@ export class Textarea implements ComponentInterface {
           ...createColorClasses(this.color),
           [mode]: true,
         }}
+      >
+        <div
+          class="textarea-wrapper"
+          ref={el => this.textareaWrapper = el}
         >
           <textarea
             class="native-textarea"
@@ -333,6 +340,7 @@ export class Textarea implements ComponentInterface {
           >
             {value}
           </textarea>
+        </div>
       </Host>
     );
   }