Fix comment inputs on mobile

web/components/feed/feed-answer-comment-group.tsx

@@ -2,7 +2,7 @@ import { Answer } from 'common/answer'
 import { Bet } from 'common/bet'
 import { Comment } from 'common/comment'
 import { formatPercent } from 'common/util/format'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { Col } from 'web/components/layout/col'
 import { Modal } from 'web/components/layout/modal'
 import { AnswerBetPanel } from 'web/components/answers/answer-bet-panel'
@@ -113,14 +113,16 @@ export function FeedAnswerCommentGroup(props: {
     // Only show one comment input for a bet at a time
     const usersMostRecentBet = bets
       .filter((b) => b.userId === user?.id)
-      .sort((a, b) => b.createdTime - a.createdTime)[0]
+      .sort((a, b) => b.createdTime - a.createdTime)
     if (
-      usersMostRecentBet &&
-      usersMostRecentBet.outcome !== answer.number.toString()
+      usersMostRecentBet.length > 1 &&
+      usersMostRecentBet[0].outcome !== answer.number.toString()
     ) {
       setShowReply(false)
     }
-  }, [answer.number, bets, user])
+    // if we pass memoized bets this still runs on every render, which we don't want
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bets.length, user, answer.number])
 
   useEffect(() => {
     if (showReply && inputRef) inputRef.focus()

web/components/feed/feed-comments.tsx

@@ -336,7 +336,6 @@ export function CommentInput(props: {
   } = props
   const user = useUser()
   const [comment, setComment] = useState('')
-  const [focused, setFocused] = useState(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
 
   const mostRecentCommentableBet = getMostRecentCommentableBet(
@@ -369,7 +368,6 @@ export function CommentInput(props: {
     )
     onSubmitComment?.()
     setComment('')
-    setFocused(false)
     setIsSubmitting(false)
   }
 
@@ -379,8 +377,6 @@ export function CommentInput(props: {
     betsByCurrentUser
   )
 
-  const shouldCollapseAfterClickOutside = !comment
-
   const isNumeric = contract.outcomeType === 'NUMERIC'
 
   return (
@@ -441,11 +437,7 @@ export function CommentInput(props: {
                     ? 'Write a reply... '
                     : 'Write a comment...'
                 }
-                autoFocus={focused}
-                onFocus={() => setFocused(true)}
-                onBlur={() =>
-                  shouldCollapseAfterClickOutside && setFocused(false)
-                }
+                autoFocus={false}
                 maxLength={MAX_COMMENT_LENGTH}
                 disabled={isSubmitting}
                 onKeyDown={(e) => {
@@ -457,7 +449,7 @@ export function CommentInput(props: {
                 }}
               />
 
-              <Col className={clsx(focused ? 'justify-end' : 'justify-center')}>
+              <Col className={clsx('justify-end')}>
                 {user && !isSubmitting && (
                   <button
                     className={clsx(
@@ -465,22 +457,16 @@ export function CommentInput(props: {
                       parentCommentId || parentAnswerOutcome
                         ? ' bottom-4'
                         : ' bottom-2',
-                      (!focused || !comment) &&
-                        'pointer-events-none text-gray-500'
+                      !comment && 'pointer-events-none text-gray-500'
                     )}
                     onClick={() => {
-                      if (!focused) return
-                      else {
                       submitComment(id)
-                      }
                     }}
                   >
-                    {focused && (
                     <PaperAirplaneIcon
                       className={'m-0 min-w-[22px] rotate-90 p-0 '}
                       height={25}
                     />
-                    )}
                   </button>
                 )}
                 {isSubmitting && (