change textarea auto height method

heimoshuiyu · Jan 12, 2024 · 4f3f6bd · 4f3f6bd
1 parent 18a7c7b
commit 4f3f6bd
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/chatbox.tsx b/src/chatbox.tsx
@@ -829,9 +829,12 @@ export default function ChatBOX(props: {
           />
         )}
         <textarea
-          rows={Math.min(10, (inputMsg.match(/\n/g) || []).length + 2)}
           value={inputMsg}
-          onChange={(event: any) => setInputMsg(event.target.value)}
+          onChange={(event: any) => {
+            setInputMsg(event.target.value);
+            event.target.style.height = "auto";
+            event.target.style.height = `${event.target.scrollHeight+1}px`;
+          }}
           onKeyPress={(event: any) => {
             console.log(event);
             if (event.ctrlKey && event.code === "Enter") {
@@ -840,6 +843,8 @@ export default function ChatBOX(props: {
               return;
             }
             setInputMsg(event.target.value);
+            event.target.style.height = "auto";
+            event.target.style.height = `${event.target.scrollHeight+1}px`;
           }}
           className="rounded grow m-1 p-1 border-2 border-gray-400 w-0"
           placeholder="Type here..."

diff --git a/src/settings.tsx b/src/settings.tsx
@@ -80,6 +80,12 @@ const LongInput = (props: {
         onChange={(event: any) => {
           props.chatStore[props.field] = event.target.value;
           props.setChatStore({ ...props.chatStore });
+          event.target.style.height = "auto";
+          event.target.style.height = `${event.target.scrollHeight + 1}px`;
+        }}
+        onKeyPress={(event: any) => {
+          event.target.style.height = "auto";
+          event.target.style.height = `${event.target.scrollHeight + 1}px`;
         }}
       ></textarea>
     </Help>