[DS-276] Resize TextArea when value changes with a debounce

.changeset/seven-rice-hang.md

@@ -0,0 +1,5 @@
+---
+"@igloo-ui/textarea": patch
+---
+
+Resize textarea on value change with a 300ms debounce

packages/Textarea/src/Textarea.tsx

@@ -7,6 +7,7 @@ import useCharLength from "./hooks/useCharLength";
 import useTruncateValue from "./hooks/useTruncateValue";
 
 import "./textarea.scss";
+import { useDebounce } from "./hooks/useDebounce";
 
 export interface TextareaProps extends React.ComponentPropsWithRef<"textarea"> {
     /** True if the textarea should allow new lines with Enter. */
@@ -58,6 +59,7 @@ const Textarea: React.FunctionComponent<TextareaProps> = React.forwardRef(
         const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
         const mergedTextareaRef = mergeRefs(textareaRef, ref);
         const [currentValue, setCurrentValue] = React.useState(value ?? "");
+        const debounceCurrentValue = useDebounce(currentValue, 300);
         const textareaMaxLength = maxLength ?? 0;
         const charLength = useCharLength(currentValue, textareaMaxLength);
         const displayCharIndicator =
@@ -106,7 +108,7 @@ const Textarea: React.FunctionComponent<TextareaProps> = React.forwardRef(
                 autosize(textareaRef.current);
                 autosize.update(textareaRef.current);
             }
-        }, [textareaRef, isAutoResize]);
+        }, [textareaRef, isAutoResize, debounceCurrentValue]);
 
         React.useEffect(() => {
             const newValue = truncateValue(value?.toString() ?? "", maxLength);

packages/Textarea/src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+    const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+
+    return debouncedValue;
+}