feat: improve auto grow functionality for TextArea

Signed-off-by: Mason Hu <[email protected]>

cypress.config.ts

@@ -8,4 +8,5 @@ export default defineConfig({
       return require("./cypress/plugins/index.js")(on, config);
     },
   },
+  experimentalStudio: true,
 });

cypress/e2e/textArea.cy.js

@@ -0,0 +1,24 @@
+context("TextArea", () => {
+  beforeEach(() => {
+    cy.visitPage("TextArea", "Dynamic-Height");
+  });
+
+  it("should adjust height automatically with text content change", () => {
+    let initialHeight = 0;
+    cy.findByRole("textbox").then(($element) => {
+      initialHeight = $element.height();
+    });
+    cy.findByRole("textbox").focus();
+    cy.findByRole("textbox").type("{Enter}{Enter}{Enter}");
+    cy.findByRole("textbox").then(($element) => {
+      const finalHeight = $element.height();
+      expect(finalHeight).to.be.greaterThan(initialHeight);
+      initialHeight = finalHeight;
+    });
+    cy.findByRole("textbox").clear();
+    cy.findByRole("textbox").then(($element) => {
+      const finalHeight = $element.height();
+      expect(finalHeight).to.be.lessThan(initialHeight);
+    });
+  });
+});

src/components/Textarea/Textarea.stories.mdx

@@ -66,3 +66,18 @@ The Textarea component defines a multi-line text input control.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+### Dynamic Height
+
+<Canvas>
+  <Story
+    name="Dynamic Height"
+    args={{
+      label: "Text area that will dynamically adjust its height based on content",
+      defaultValue: "Ubuntu",
+      grow: true
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

src/components/Textarea/Textarea.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { TextareaHTMLAttributes, ReactNode } from "react";
 
 import Field from "../Field";
@@ -90,13 +90,25 @@ const Textarea = ({
   const validationId = useId();
   const helpId = useId();
   const hasError = !!error;
+  const [innerValue, setInnervalue] = useState(props.defaultValue);
 
   useEffect(() => {
     if (takeFocus) {
       textareaRef.current.focus();
     }
   }, [takeFocus]);
 
+  useLayoutEffect(() => {
+    if (grow) {
+      const textArea = textareaRef.current;
+      if (textArea) {
+        textArea.style.height = "0px";
+        const scrollHeight = textArea.scrollHeight;
+        textArea.style.height = `${scrollHeight}px`;
+      }
+    }
+  }, [textareaRef, grow, innerValue, props.value]);
+
   return (
     <Field
       caution={caution}
@@ -122,9 +134,10 @@ const Textarea = ({
         id={id}
         onKeyUp={(evt) => {
           onKeyUp && onKeyUp(evt);
-          if (grow) {
-            evt.currentTarget.style.height =
-              evt.currentTarget.scrollHeight + "px";
+        }}
+        onChange={(evt) => {
+          if (!props.value) {
+            setInnervalue(evt.target.value);
           }
         }}
         ref={textareaRef}
@@ -139,6 +152,7 @@ const Textarea = ({
           style
         }
         {...props}
+        value={props.value || innerValue}
       />
     </Field>
   );