I think using useState fixed something?

web/components/comment-input.tsx

@@ -1,4 +1,5 @@
-import { PaperAirplaneIcon, XIcon } from '@heroicons/react/solid'
+import { PaperAirplaneIcon, XCircleIcon, XIcon } from '@heroicons/react/solid'
+import { scrollIntoView } from '@tiptap/core/dist/packages/core/src/commands'
 import { Editor } from '@tiptap/react'
 import clsx from 'clsx'
 import { Answer } from 'common/answer'
@@ -70,6 +71,42 @@ export function CommentInput(props: {
     </Row>
   )
 }
+export function AnswerCommentInput(props: {
+  contract: Contract<AnyContractType>
+  answerResponse: Answer
+  onCancelAnswerResponse?: () => void
+}) {
+  const { contract, answerResponse, onCancelAnswerResponse } = props
+  const [replyTo, _setReplyTo] = useState<ReplyTo>({
+    id: answerResponse.id,
+    username: answerResponse.username,
+  })
+
+  return (
+    <>
+      <Row className="gap-2">
+        <CommentsAnswer answer={answerResponse} contract={contract} />
+      </Row>
+      <Row>
+        <div className="ml-1">
+          <Curve size={28} strokeWidth={1} color="#D8D8EB" />
+        </div>
+        <div className="relative w-full pt-1">
+          <ContractCommentInput
+            contract={contract}
+            parentAnswerOutcome={answerResponse.number.toString()}
+            replyTo={replyTo}
+            onSubmitComment={onCancelAnswerResponse}
+          />
+          <button onClick={onCancelAnswerResponse}>
+            <div className="absolute -top-1 -right-2 h-4 w-4 rounded-full bg-white" />
+            <XCircleIcon className="text-greyscale-5 hover:text-greyscale-6 absolute -top-1 -right-2 h-5 w-5" />
+          </button>
+        </div>
+      </Row>
+    </>
+  )
+}
 
 export function CommentInputTextArea(props: {
   user: User | undefined | null
@@ -157,42 +194,3 @@ export function CommentInputTextArea(props: {
     </>
   )
 }
-
-export function AnswerCommentInput(props: {
-  contract: Contract<AnyContractType>
-  answerResponse: Answer
-  onCancelAnswerResponse?: () => void
-}) {
-  const { contract, answerResponse, onCancelAnswerResponse } = props
-  // const [replyTo, setReplyTo] = useState<ReplyTo | undefined>({
-  //   id: answerResponse.id,
-  //   username: answerResponse.username,
-  // })
-
-  return (
-    <>
-      <Row className="gap-2">
-        <CommentsAnswer answer={answerResponse} contract={contract} />
-      </Row>
-      <Row>
-        <div className="ml-1">
-          <Curve size={28} strokeWidth={1} color="#D8D8EB" />
-        </div>
-        <div className="w-full pt-1">
-          <ContractCommentInput
-            contract={contract}
-            parentAnswerOutcome={answerResponse.number.toString()}
-            replyTo={{
-              id: answerResponse.id,
-              username: answerResponse.username,
-            }}
-            onSubmitComment={onCancelAnswerResponse}
-          />
-        </div>
-        <button onClick={onCancelAnswerResponse}>
-          <XIcon className="h-5 w-5" />
-        </button>
-      </Row>
-    </>
-  )
-}