[DS-276] Resize TextArea when value changes with a debounce (#851)

.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;
+}