Simulate GitHub's textarea behavior

components/CommentBox.tsx

@@ -35,6 +35,7 @@ export default function CommentBox({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [isFixedWidth, setIsFixedWidth] = useState(false);
+  const [lastHeight, setLastHeight] = useState('');
   const { token, origin, getLoginUrl } = useContext(AuthContext);
   const textarea = useRef<HTMLTextAreaElement>(null);
   const loginUrl = getLoginUrl(origin);
@@ -101,17 +102,22 @@ export default function CommentBox({
     setIsReplyOpen(true);
   };
 
-  const handleTextAreaChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
-    setInput(event.target.value);
-    const elem = event.target as HTMLTextAreaElement;
-    resizeTextArea(elem);
-  }, []);
+  const handleTextAreaChange = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>) => {
+      setInput(event.target.value);
+      // Only resize if it hasn't been resized manually.
+      if (!lastHeight || lastHeight === textarea.current.style.height) {
+        resizeTextArea(textarea.current);
+        setLastHeight(textarea.current.style.height);
+      }
+    },
+    [lastHeight],
+  );
 
   useEffect(() => {
     if (!textarea.current) return;
     if (isReplyOpen) textarea.current.focus();
-    resizeTextArea(textarea.current);
-  }, [textarea, isReplyOpen]);
+  }, [isReplyOpen]);
 
   return !isReply || isReplyOpen ? (
     <form

lib/utils.ts

@@ -48,7 +48,8 @@ export function parseRepoWithOwner(repoWithOwner: string) {
 }
 
 export function resizeTextArea(textarea: HTMLTextAreaElement) {
+  const maxHeight = 270;
   textarea.style.height = `0px`;
-  const height = textarea.scrollHeight <= 772 ? textarea.scrollHeight : 772;
+  const height = textarea.scrollHeight <= maxHeight ? textarea.scrollHeight : maxHeight;
   textarea.style.height = `${height}px`;
 }

styles/base.css

@@ -525,7 +525,7 @@ img.emoji {
 }
 
 .gsc-comment-box-textarea {
-  @apply w-full p-2 border rounded min-h-[100px] disabled:cursor-not-allowed;
+  @apply w-full p-2 border rounded min-h-[100px] max-h-[500px] disabled:cursor-not-allowed;
 }
 
 .gsc-comment-box-bottom {