From fab83cfc33f8cfcefb0ab72eccfcfe9dbf12d758 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Wed, 3 Aug 2022 16:16:46 -0600
Subject: [PATCH] Don't auotfocus on mobile

---
 web/components/groups/group-chat.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/web/components/groups/group-chat.tsx b/web/components/groups/group-chat.tsx
index 741e55bd..2b5bd6e1 100644
--- a/web/components/groups/group-chat.tsx
+++ b/web/components/groups/group-chat.tsx
@@ -47,6 +47,13 @@ export function GroupChat(props: {
   const router = useRouter()
   const isMember = user && group.memberIds.includes(user?.id)
 
+  const { width, height } = useWindowSize()
+  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
+  // Subtract bottom bar when it's showing (less than lg screen)
+  const bottomBarHeight = (width ?? 0) < 1024 ? 58 : 0
+  const remainingHeight =
+    (height ?? 0) - (containerRef?.offsetTop ?? 0) - bottomBarHeight
+
   useMemo(() => {
     // Group messages with createdTime within 2 minutes of each other.
     const tempMessages = []
@@ -86,8 +93,9 @@ export function GroupChat(props: {
   }, [messages, router.asPath])
 
   useEffect(() => {
-    if (inputRef) inputRef.focus()
-  }, [inputRef])
+    // is mobile?
+    if (inputRef && width && width > 720) inputRef.focus()
+  }, [inputRef, width])
 
   function onReplyClick(comment: Comment) {
     setReplyToUsername(comment.userUsername)
@@ -107,13 +115,6 @@ export function GroupChat(props: {
     inputRef?.focus()
   }
 
-  const { width, height } = useWindowSize()
-  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
-  // Subtract bottom bar when it's showing (less than lg screen)
-  const bottomBarHeight = (width ?? 0) < 1024 ? 58 : 0
-  const remainingHeight =
-    (height ?? 0) - (containerRef?.offsetTop ?? 0) - bottomBarHeight
-
   return (
     <Col ref={setContainerRef} style={{ height: remainingHeight }}>
       <Col