fix(textarea): fix helper-text "max-width: 0px" on hidden render (#20429)

* test: add test case stories

* chore: wc test story

* fix(react): fix wrapper width via resizeObserver

* test(wc): add test with tab story

* fix(wc): fix wrapper width via resizeObserver

* chore: cleanup

* Update packages/react/src/components/TextArea/TextArea.tsx

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

* chore: remove test stories

---------

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

Author: maradwan26

packages/react/src/components/TextArea/TextArea.tsx

@@ -226,19 +226,29 @@ const TextArea = frFn((props, forwardRef) => {
   }, [value, defaultValue, counterMode]);
 
   useIsomorphicEffect(() => {
-    const measuredWidth = wrapperRef.current?.scrollWidth;
     if (other.cols && textareaRef.current) {
       textareaRef.current.style.width = '';
       textareaRef.current.style.resize = 'none';
     } else if (textareaRef.current) {
       textareaRef.current.style.width = `100%`;
     }
-    [helperTextRef, errorTextRef, warnTextRef].forEach((r) => {
-      if (r.current) {
-        r.current.style.maxWidth = `${measuredWidth}px`;
-        r.current.style.overflowWrap = 'break-word';
-      }
+
+    if (!wrapperRef.current) return;
+    const applyWidth = (width: number) => {
+      [helperTextRef, errorTextRef, warnTextRef].forEach((r) => {
+        if (r.current) {
+          r.current.style.maxWidth = `${width}px`;
+          r.current.style.overflowWrap = 'break-word';
+        }
+      });
+    };
+
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      applyWidth(entry.contentRect.width);
     });
+    resizeObserver.observe(wrapperRef.current);
+
+    return () => resizeObserver && resizeObserver.disconnect();
   }, [other.cols, invalid, warn]);
 
   const textareaProps: {

packages/web-components/src/components/textarea/textarea.ts

@@ -156,10 +156,10 @@ class CDSTextarea extends CDSTextInput {
   private _prevCounterMode: 'character' | 'word' = this.counterMode;
 
   /**
-   * The previous cols value. This lets updated() conditionally call _measureWrapper()
-   * if the cols value has changed.
+   * Observes the textarea wrapper’s size to re-measure helper/invalid/warn text width when
+   * cols is updated
    */
-  private _prevCols?: number;
+  private _resizeObserver?: ResizeObserver;
 
   render() {
     const { enableCounter, maxCount } = this;
@@ -272,10 +272,6 @@ class CDSTextarea extends CDSTextInput {
   }
   updated(): void {
     super.updated?.();
-    if (this.cols !== this._prevCols) {
-      this._prevCols = this.cols;
-      this._measureWrapper();
-    }
     if (this.counterMode !== this._prevCounterMode) {
       const textarea = this._textarea;
       if (textarea) {
@@ -287,6 +283,16 @@ class CDSTextarea extends CDSTextInput {
       }
       this._prevCounterMode = this.counterMode;
     }
+
+    const wrapper = this.shadowRoot?.querySelector<HTMLElement>(
+      `.${prefix}--text-area__wrapper`
+    );
+    if (!wrapper) return;
+
+    this._resizeObserver = new ResizeObserver(() => {
+      this._measureWrapper();
+    });
+    this._resizeObserver.observe(wrapper);
   }
 
   /**
@@ -314,6 +320,11 @@ class CDSTextarea extends CDSTextInput {
     });
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    this._resizeObserver?.disconnect();
+  }
+
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,