From 0f1e1f91dd24e721b53d463af8652a2cc69b1a05 Mon Sep 17 00:00:00 2001
From: giaphat71 <59292551+giaphat71@users.noreply.github.com>
Date: Mon, 16 Jun 2025 21:14:07 +0700
Subject: [PATCH] Fix user resize on textarea

When user resize the textarea, the ResizeObserver will trigger a height reset on textarea, causing height flashing.
---
 src/components/textarea/textarea.component.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/textarea/textarea.component.ts b/src/components/textarea/textarea.component.ts
index e76dfbf18c..903c66ca57 100644
--- a/src/components/textarea/textarea.component.ts
+++ b/src/components/textarea/textarea.component.ts
@@ -153,7 +153,7 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
     this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
 
     this.updateComplete.then(() => {
-      this.setTextareaHeight();
+      this.setTextareaHeight(true);
       this.resizeObserver.observe(this.input);
     });
   }
@@ -195,13 +195,14 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
     this.formControlController.emitInvalidEvent(event);
   }
 
-  private setTextareaHeight() {
+  private setTextareaHeight(isProgrammatic?: boolean) {
     if (this.resize === 'auto') {
       // This prevents layout shifts. We use `clientHeight` instead of `scrollHeight` to account for if the `<textarea>` has a max-height set on it. In my tests, this has worked fine. Im not aware of any edge cases. [Konnor]
       this.sizeAdjuster.style.height = `${this.input.clientHeight}px`;
       this.input.style.height = 'auto';
       this.input.style.height = `${this.input.scrollHeight}px`;
-    } else {
+    } else if(isProgrammatic){
+      // The height only be changed by user resize, so no need to reset the value.
       this.input.style.height = '';
     }
   }
@@ -214,7 +215,7 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
 
   @watch('rows', { waitUntilFirstUpdate: true })
   handleRowsChange() {
-    this.setTextareaHeight();
+    this.setTextareaHeight(true);
   }
 
   @watch('value', { waitUntilFirstUpdate: true })