From 2e7055622ea564285d25154ce4dfedf0e2f7eb64 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Fri, 22 Jul 2022 17:38:28 +0200
Subject: [PATCH] Fixed reply box redrawing when clicking the button again

refs https://github.com/TryGhost/Team/issues/1710

Was caused by: mouseDown triggered on Reply button -> editor blurred -> editor closed itself -> onClick on reply opened the form again
---
 apps/comments-ui/src/components/Comment.js | 12 ++++++++++--
 apps/comments-ui/src/components/Form.js    | 13 +++++--------
 apps/comments-ui/src/components/Reply.js   |  7 ++++++-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index 702e85a8ab..639ca66491 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -17,10 +17,18 @@ const Comment = (props) => {
         setIsInEditMode(current => !current);
     };
 
+    const closeEditMode = () => {
+        setIsInEditMode(false);
+    };
+
     const toggleReplyMode = () => {
         setIsInReplyMode(current => !current);
     };
 
+    const closeReplyMode = () => {
+        setIsInReplyMode(false);
+    };
+
     const {admin, avatarSaturation, member, commentsEnabled} = useContext(AppContext);
     const comment = props.comment;
     const hasReplies = comment.replies && comment.replies.length > 0;
@@ -41,7 +49,7 @@ const Comment = (props) => {
 
     if (isInEditMode) {
         return (
-            <Form comment={comment} toggle={toggleEditMode} parent={props.parent} isEdit={true} />
+            <Form comment={comment} close={closeEditMode} parent={props.parent} isEdit={true} />
         );
     } else {
         return (
@@ -82,7 +90,7 @@ const Comment = (props) => {
                     leaveTo="opacity-0"
                 >
                     <div className="ml-14 my-10">
-                        <Form parent={comment} toggle={toggleReplyMode} isReply={true} />
+                        <Form parent={comment} close={closeReplyMode} isReply={true} />
                     </div>
                 </Transition>
             </>
diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index 868b1953e1..70a17e8c02 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -141,10 +141,10 @@ const Form = (props) => {
         editor.on('blur', () => {
             if (editor?.isEmpty) {
                 setFormOpen(false);
-                if (props.isReply && props.toggle) {
+                if (props.isReply && props.close) {
                     // TODO: we cannot toggle the form when this happens, because when the member doesn't have a name we'll always loose focus to input the name...
                     // Need to find a different way for this behaviour
-                    props.toggle();
+                    props.close();
                 }
             }
         });     
@@ -177,10 +177,7 @@ const Form = (props) => {
     
                 // Clear message and blur on success
                 editor.chain().clearContent().blur().run();
-                props.toggle();
-
-                setFormOpen(false);
-                props.toggle();
+                props.close();
             } catch (e) {
                 // eslint-disable-next-line no-console
                 console.error(e);
@@ -195,7 +192,7 @@ const Form = (props) => {
                 parent: props.parent
             });
             
-            props.toggle();
+            props.close();
         } else {
             try {
                 // Send comment to server
@@ -291,7 +288,7 @@ const Form = (props) => {
                                 transition-[opacity] duration-150 
                             ">
                                 {props.isEdit &&
-                                    <button type="button" onClick={props.toggle} className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400">Cancel</button>}
+                                    <button type="button" onClick={props.close} className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400">Cancel</button>}
                                 <button
                                     className={`
                                         transition-[opacity] duration-150
diff --git a/apps/comments-ui/src/components/Reply.js b/apps/comments-ui/src/components/Reply.js
index 7316a63ae4..60ab0cf010 100644
--- a/apps/comments-ui/src/components/Reply.js
+++ b/apps/comments-ui/src/components/Reply.js
@@ -5,8 +5,13 @@ import {ReactComponent as ReplyIcon} from '../images/icons/reply.svg';
 function Reply(props) {
     const {member} = useContext(AppContext);
 
+    const preventDefault = (event) => {
+        // We need to prevent blurring the input field when clicking the reply button (that could cause blur + focus again because mousedown is causing the input blur, then onclick focusses again)
+        event.preventDefault();
+    };
+
     return member ?
-        (<button className={`group transition-all duration-50 ease-linear flex font-sans items-center text-sm outline-0 ${props.isReplying ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)] hover:text-neutral-600'}`} onClick={props.toggleReply}>
+        (<button className={`group transition-all duration-50 ease-linear flex font-sans items-center text-sm outline-0 ${props.isReplying ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)] hover:text-neutral-600'}`} onMouseDown={preventDefault} onClick={props.toggleReply}>
             <ReplyIcon className={`mr-[6px] ${props.isReplying ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 dark:stroke-[rgba(255,255,255,0.5)] group-hover:stroke-neutral-600'} transition duration-50 ease-linear`} />Reply
         </button>) : null;
 }