backport SL-2182

docs/docs/resources/changelog.md

@@ -28,6 +28,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Fixed a bug in `<wa-select>` that prevented label changes in `<wa-option>` from updating the controller
 - Fixed a bug in `<wa-carousel>` that caused interactive elements to be activated when dragging
 - Fixed a bug in `<wa-tab-group>` that prevented changing tabs by setting `active` on `<wa-tab>` elements
+- Fixed a bug in `<wa-textarea>` causing scroll jumping when using `resize="auto"`
 - Improved alignment of the play icon in `<wa-animated-image>`
 - Improved behavior of link buttons to not set `noreferrer noopener` by default
 

src/components/textarea/textarea.styles.ts

@@ -24,7 +24,7 @@ export default css`
     border-style: var(--border-style);
     border-width: var(--border-width);
     box-shadow: var(--box-shadow);
-    display: flex;
+    display: grid;
     align-items: center;
     position: relative;
     width: 100%;
@@ -38,6 +38,17 @@ export default css`
     cursor: text;
   }
 
+  .textarea__control,
+  .textarea__size-adjuster {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+
+  .textarea__size-adjuster {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+  }
+
   /* Standard textareas */
   .textarea--standard.textarea--focused:not(.textarea--disabled) {
     outline: var(--wa-focus-ring);
@@ -62,7 +73,6 @@ export default css`
   }
 
   .textarea__control {
-    flex: 1 1 auto;
     font: inherit;
     line-height: var(--wa-line-height-expanded);
     color: var(--wa-form-control-value-color);

src/components/textarea/textarea.ts

@@ -57,6 +57,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
   private resizeObserver: ResizeObserver;
 
   @query('.textarea__control') input: HTMLTextAreaElement;
+  @query('.textarea__size-adjuster') sizeAdjuster: HTMLTextAreaElement;
 
   @state() private hasFocus = false;
   @property() title = ''; // make reactive to pass through
@@ -225,6 +226,8 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
 
   private setTextareaHeight() {
     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 {
@@ -377,6 +380,9 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}
             ></textarea>
+
+            <!-- This "adjuster" exists to prevent layout shifting. https://github.com/shoelace-style/shoelace/issues/2180 -->
+            <div part="textarea-adjuster" class="textarea__size-adjuster" ?hidden=${this.resize !== 'auto'}></div>
           </div>
         </div>