From 1ff185fe9fae52a1c7706125767baab75ba8436a Mon Sep 17 00:00:00 2001
From: Outrun Colors <itsoutruncolors@gmail.com>
Date: Mon, 26 Sep 2022 19:48:23 -0500
Subject: [PATCH] Scroll chat input into view when focused

---
 chat/package.json                    | 2 +-
 chat/src/features/chat/UserInput.tsx | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/chat/package.json b/chat/package.json
index 8a0c14e79..ea2a4b15d 100644
--- a/chat/package.json
+++ b/chat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chat",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "main": "./src/index.tsx",
   "license": "MIT",
   "dependencies": {
diff --git a/chat/src/features/chat/UserInput.tsx b/chat/src/features/chat/UserInput.tsx
index 96dbd0f1d..864185b7a 100644
--- a/chat/src/features/chat/UserInput.tsx
+++ b/chat/src/features/chat/UserInput.tsx
@@ -84,6 +84,9 @@ export function UserInput() {
     },
     [draft]
   );
+  const handleFocus = useCallback(() => {
+    builtChatInput.current?.scrollIntoView({ behavior: "smooth" });
+  }, []);
 
   return (
     <form ref={form} className="UserInput" onSubmit={handleSendMessage}>
@@ -118,6 +121,7 @@ export function UserInput() {
         rows={1}
         onChange={handleChange}
         onKeyUp={handleKeyUp}
+        onFocus={handleFocus}
         placeholder="Message"
         autoComplete="off"
         value={draft}