From b60f0995d925c5ca3de58cffecf8da4080aee66f Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Thu, 21 Jul 2022 17:45:55 +0100
Subject: [PATCH] Added in the toggle so when blurring from reply textbox it'll
 undo the reply button too

refs https://github.com/TryGhost/Team/issues/1703
---
 apps/comments-ui/src/components/Comment.js |  2 +-
 apps/comments-ui/src/components/Form.js    | 12 +++++-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index ee3c7c93a0..91db71e86c 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -80,7 +80,7 @@ const Comment = (props) => {
                     leaveTo="opacity-0"
                 >
                     <div className="ml-14 my-10">
-                        <Form parent={comment} toggle={toggleReplyMode} isReply={true} />
+                        <Form parent={comment} toggle={toggleReplyMode} isReply={true} toggleReplyMode={toggleReplyMode} />
                     </div>
                 </Transition>
             </>
diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index e43a93d630..6b94e45c17 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -35,11 +35,6 @@ const Form = (props) => {
         ...getEditorConfig(config)
     });
 
-    // const isInViewport = () => {
-    //     const top = formEl.current.getBoundingClientRect().top;
-    //     return (top >= 0 && top <= window.innerHeight);
-    // };
-
     const getScrollToPosition = () => {
         let yOffset = -100; 
         const element = formEl.current;
@@ -86,9 +81,12 @@ const Form = (props) => {
             }, 100);
         }
 
-        editor.on('blur', (editorObj) => {
+        editor.on('blur', () => {
             if (editor?.isEmpty) {
                 setFormOpen(false);
+                if (props.isReply && props.toggleReplyMode) {
+                    props.toggleReplyMode();
+                }
             }
         });
 
@@ -108,7 +106,7 @@ const Form = (props) => {
                 });
             })
             .run();
-    }, [editor, props.isEdit, props.isReply, formEl]);
+    }, [editor, props, props.isEdit, props.isReply, props.toggleReplyMode]);
 
     const submitForm = async (event) => {
         event.preventDefault();