diff --git a/web/components/feed/feed-answer-comment-group.tsx b/web/components/feed/feed-answer-comment-group.tsx index 2cf7ac20..92d28153 100644 --- a/web/components/feed/feed-answer-comment-group.tsx +++ b/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() diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx index 3303636c..0be02de8 100644 --- a/web/components/feed/feed-comments.tsx +++ b/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: { }} /> - + {user && !isSubmitting && ( )} {isSubmitting && (