ui(chat): increase textarea size with user input

smallcloudai · Feb 12, 2024 · edfd0b1 · edfd0b1
1 parent 6bdda38
commit edfd0b1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/TextArea/TextArea.module.css b/src/components/TextArea/TextArea.module.css
@@ -2,6 +2,7 @@
   border: none;
   box-shadow: none;
   outline: none;
+  max-height: 50dvh;
 }
 
 .textarea :global(.rt-TextAreaInput) {

diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useImperativeHandle, useRef } from "react";
 import { TextArea as RadixTextArea } from "@radix-ui/themes";
 import classNames from "classnames";
 import styles from "./TextArea.module.css";
@@ -10,11 +10,23 @@ export type TextAreaProps = React.ComponentProps<typeof RadixTextArea> & {
 
 export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
   (props, ref) => {
+    const innerRef = useRef<HTMLTextAreaElement>(null);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    useImperativeHandle(ref, () => innerRef.current!, []);
+
+    useEffect(() => {
+      if (innerRef.current) {
+        innerRef.current.style.height = "1px";
+        innerRef.current.style.height =
+          2 + innerRef.current.scrollHeight + "px";
+      }
+    }, [innerRef.current?.value]);
+
     return (
       <RadixTextArea
         {...props}
         className={classNames(styles.textarea, props.className)}
-        ref={ref}
+        ref={innerRef}
       />
     );
   },