fixed issue where mention doesn't go away

1 files changed, 9 insertions, 11 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index caba68d5..f9c5669b 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -43,6 +43,7 @@ const AddComment: React.FC<AddCommentProps> = ({
   placeholderText,
   isReplying,
 }) => {
+  const [inReplyToMention, setInReplyToMention] = useState('');
   const [comment, setComment] = useState('');
   const [keyboardVisible, setKeyboardVisible] = useState(false);
   const {avatar} = useSelector((state: RootState) => state.user);
@@ -78,13 +79,6 @@ const AddComment: React.FC<AddCommentProps> = ({
   };
 
   useEffect(() => {
-    if (isReplying && commentInReplyTo) {
-      const commenter = commentInReplyTo.commenter;
-      setComment(`@[${commenter.username}](${commenter.id}) `);
-    }
-  }, [isReplying, commentInReplyTo]);
-
-  useEffect(() => {
     const showKeyboard = () => setKeyboardVisible(true);
     Keyboard.addListener('keyboardWillShow', showKeyboard);
     return () => Keyboard.removeListener('keyboardWillShow', showKeyboard);
@@ -96,12 +90,16 @@ const AddComment: React.FC<AddCommentProps> = ({
     return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
   }, []);
 
-  //If a comment is in Focus, bring the keyboard up so user is able to type in a reply
   useEffect(() => {
-    if (isReplying) {
+    if (isReplying && commentInReplyTo) {
+      // bring up keyboard
       ref.current?.focus();
+      const commenter = commentInReplyTo.commenter;
+      setInReplyToMention(`@[${commenter.username}](${commenter.id}) `);
+    } else {
+      setInReplyToMention('');
     }
-  }, [isReplying]);
+  }, [isReplying, commentInReplyTo]);
 
   return (
     <KeyboardAvoidingView
@@ -117,7 +115,7 @@ const AddComment: React.FC<AddCommentProps> = ({
           <MentionInput
             containerStyle={styles.text}
             placeholder={placeholderText}
-            value={comment}
+            value={inReplyToMention + comment}
             onChange={setComment}
             inputRef={ref}
             partTypes={mentionPartTypes}