fix: Handle escape actions properly in mentions input

client/src/components/comments/Comments/Add.jsx

@@ -31,8 +31,9 @@ const Add = React.memo(() => {
   const [isOpened, setIsOpened] = useState(false);
   const [selectTextFieldState, selectTextField] = useToggle();
 
-  const mentionsInputRef = useRef(null);
   const textFieldRef = useRef(null);
+  const textMentionsRef = useRef(null);
+  const textInputRef = useRef(null);
   const [buttonRef, handleButtonRef] = useNestedRef();
 
   const submit = useCallback(() => {
@@ -42,24 +43,24 @@ const Add = React.memo(() => {
     };
 
     if (!cleanData.text) {
-      textFieldRef.current.select();
+      textInputRef.current.select();
       return;
     }
 
     dispatch(entryActions.createCommentInCurrentCard(cleanData));
     setData(DEFAULT_DATA);
     selectTextField();
-  }, [dispatch, data, setData, selectTextField, textFieldRef]);
+  }, [dispatch, data, setData, selectTextField]);
 
   const handleEscape = useCallback(() => {
-    if (mentionsInputRef.current.isOpened()) {
+    if (textMentionsRef.current.isOpened()) {
-      mentionsInputRef.current.clearSuggestions();
+      textMentionsRef.current.clearSuggestions();
       return;
     }
 
     setIsOpened(false);
-    textFieldRef.current.blur();
+    textInputRef.current.blur();
-  }, [textFieldRef]);
+  }, []);
 
   const [activateEscapeInterceptor, deactivateEscapeInterceptor] =
     useEscapeInterceptor(handleEscape);
@@ -95,8 +96,8 @@ const Add = React.memo(() => {
   }, []);
 
   const handleClickAwayCancel = useCallback(() => {
-    textFieldRef.current.focus();
+    textInputRef.current.focus();
-  }, [textFieldRef]);
+  }, []);
 
   const clickAwayProps = useClickAwayListener(
     [textFieldRef, buttonRef],
@@ -123,18 +124,18 @@ const Add = React.memo(() => {
   }, [isOpened]);
 
   useDidUpdate(() => {
-    textFieldRef.current.focus();
+    textInputRef.current.focus();
   }, [selectTextFieldState]);
 
   return (
     <Form onSubmit={handleSubmit}>
-      <div className={styles.field}>
+      <div ref={textFieldRef} className={styles.field}>
         <MentionsInput
           {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
           allowSpaceInQuery
           allowSuggestionsAboveCursor
-          ref={mentionsInputRef}
+          ref={textMentionsRef}
-          inputRef={textFieldRef}
+          inputRef={textInputRef}
           value={data.text}
           placeholder={t('common.writeComment')}
           maxLength={1048576}

client/src/components/comments/Comments/Edit.jsx

@@ -42,8 +42,9 @@ const Edit = React.memo(({ commentId, onClose }) => {
     ...defaultData,
   }));
 
-  const mentionsInputRef = useRef(null);
   const textFieldRef = useRef(null);
+  const textMentionsRef = useRef(null);
+  const textInputRef = useRef(null);
   const [buttonRef, handleButtonRef] = useNestedRef();
 
   const submit = useCallback(() => {
@@ -79,6 +80,11 @@ const Edit = React.memo(({ commentId, onClose }) => {
           submit();
         }
       } else if (event.key === 'Escape') {
+        if (textMentionsRef.current.isOpened()) {
+          textMentionsRef.current.clearSuggestions();
+          return;
+        }
+
         onClose();
       }
     },
@@ -86,8 +92,8 @@ const Edit = React.memo(({ commentId, onClose }) => {
   );
 
   const handleClickAwayCancel = useCallback(() => {
-    textFieldRef.current.focus();
+    textInputRef.current.focus();
-  }, [textFieldRef]);
+  }, []);
 
   const clickAwayProps = useClickAwayListener(
     [textFieldRef, buttonRef],
@@ -106,18 +112,18 @@ const Edit = React.memo(({ commentId, onClose }) => {
   );
 
   useEffect(() => {
-    focusEnd(textFieldRef.current);
+    focusEnd(textInputRef.current);
-  }, [textFieldRef]);
+  }, []);
 
   return (
     <Form onSubmit={handleSubmit}>
-      <div className={styles.field}>
+      <div ref={textFieldRef} className={styles.field}>
         <MentionsInput
           {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
           allowSpaceInQuery
           allowSuggestionsAboveCursor
-          ref={mentionsInputRef}
+          ref={textMentionsRef}
-          inputRef={textFieldRef}
+          inputRef={textInputRef}
           value={data.text}
           maxLength={1048576}
           rows={3}