From 828e066d3dd2898d5fee22339a5573de682fd5a5 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Fri, 9 Aug 2024 12:08:22 +0200
Subject: [PATCH] fix replymodal autofocus

---
 src/components/reply-modal/reply-modal.tsx | 35 ++++++++++++----------
 src/views/board/board.tsx                  |  2 +-
 src/views/post/post.tsx                    |  2 +-
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index 6a7455bc..28a41b8d 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -17,12 +17,13 @@ import useAnonMode from '../../hooks/use-anon-mode';
 
 interface ReplyModalProps {
   closeModal: () => void;
+  showReplyModal: boolean;
   parentCid: string;
   postCid: string;
   scrollY: number;
 }
 
-const ReplyModal = ({ closeModal, parentCid, postCid, scrollY }: ReplyModalProps) => {
+const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY }: ReplyModalProps) => {
   const { t } = useTranslation();
   const { subplebbitAddress } = useParams() as { subplebbitAddress: string };
   const { setPublishReplyOptions, publishReply } = usePublishReply({ cid: parentCid, subplebbitAddress });
@@ -122,14 +123,15 @@ const ReplyModal = ({ closeModal, parentCid, postCid, scrollY }: ReplyModalProps
       )
     : `The subplebbit might be offline and publishing might fail.`;
 
-  const setTextRef = (ref: HTMLTextAreaElement | null) => {
-    if (ref) {
-      textRef.current = ref;
-      // if (!isMobile && !urlRef.current?.value) {
-      //   ref.focus();
-      // }
+  useEffect(() => {
+    if (showReplyModal && !isMobile) {
+      setTimeout(() => {
+        if (textRef.current) {
+          textRef.current.focus();
+        }
+      }, 0);
     }
-  };
+  }, [showReplyModal, isMobile]);
 
   useEffect(() => {
     if (textRef.current) {
@@ -196,7 +198,7 @@ const ReplyModal = ({ closeModal, parentCid, postCid, scrollY }: ReplyModalProps
             cols={48}
             rows={4}
             wrap='soft'
-            ref={setTextRef}
+            ref={textRef}
             spellCheck={false}
             defaultValue={contentPrefix + selectedText}
             onInput={handleContentInput}
@@ -227,12 +229,15 @@ const ReplyModal = ({ closeModal, parentCid, postCid, scrollY }: ReplyModalProps
     </div>
   );
 
-  return isMobile ? (
-    modalContent
-  ) : (
-    <Draggable handle='.replyModalHandle' nodeRef={nodeRef}>
-      {modalContent}
-    </Draggable>
+  return (
+    showReplyModal &&
+    (isMobile ? (
+      modalContent
+    ) : (
+      <Draggable handle='.replyModalHandle' nodeRef={nodeRef}>
+        {modalContent}
+      </Draggable>
+    ))
   );
 };
 
diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx
index cd42dea4..64036b43 100644
--- a/src/views/board/board.tsx
+++ b/src/views/board/board.tsx
@@ -158,7 +158,7 @@ const Board = () => {
   return (
     <div className={styles.content}>
       {location.pathname.endsWith('/settings') && <SettingsModal />}
-      {showReplyModal && activeCid && threadCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} postCid={threadCid} scrollY={scrollY} />}
+      {activeCid && threadCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} postCid={threadCid} scrollY={scrollY} showReplyModal={showReplyModal} />}
       {feed.length !== 0 ? (
         <>
           {rules && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
diff --git a/src/views/post/post.tsx b/src/views/post/post.tsx
index b3c94dff..0f4cf02a 100644
--- a/src/views/post/post.tsx
+++ b/src/views/post/post.tsx
@@ -91,7 +91,7 @@ const PostPage = () => {
   return (
     <div className={styles.content}>
       {isInSettigsView && <SettingsModal />}
-      {showReplyModal && activeCid && threadCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} postCid={threadCid} scrollY={scrollY} />}
+      {activeCid && threadCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} postCid={threadCid} scrollY={scrollY} showReplyModal={showReplyModal} />}
       {/* TODO: remove this replyCount error once api supports scrolling replies pages */}
       {replyCount > 60 && <span className={styles.error}>Error: this thread has too many replies, some of them cannot be displayed right now.</span>}
       {error && <span className={styles.error}>Error: {error.message}</span>}