From 5a3a4240c66d45d9b51caea3f95a368f14faccbc Mon Sep 17 00:00:00 2001
From: Maksim Eltyshev <meltyshev@gmail.com>
Date: Tue, 10 Jun 2025 14:00:08 +0200
Subject: [PATCH] fix: Add cancel button when editing comment

---
 .../src/components/comments/Comments/Edit.jsx  | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/src/components/comments/Comments/Edit.jsx b/client/src/components/comments/Comments/Edit.jsx
index e1a2ebf5..1e4e118e 100755
--- a/client/src/components/comments/Comments/Edit.jsx
+++ b/client/src/components/comments/Comments/Edit.jsx
@@ -45,7 +45,8 @@ const Edit = React.memo(({ commentId, onClose }) => {
   const textFieldRef = useRef(null);
   const textMentionsRef = useRef(null);
   const textInputRef = useRef(null);
-  const [buttonRef, handleButtonRef] = useNestedRef();
+  const [submitButtonRef, handleSubmitButtonRef] = useNestedRef();
+  const [cancelButtonRef, handleCancelButtonRef] = useNestedRef();
 
   const submit = useCallback(() => {
     const cleanData = {
@@ -91,12 +92,16 @@ const Edit = React.memo(({ commentId, onClose }) => {
     [onClose, submit],
   );
 
+  const handleCancelClick = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
   const handleClickAwayCancel = useCallback(() => {
     textInputRef.current.focus();
   }, []);
 
   const clickAwayProps = useClickAwayListener(
-    [textFieldRef, buttonRef],
+    [textFieldRef, submitButtonRef, cancelButtonRef],
     submit,
     handleClickAwayCancel,
   );
@@ -152,9 +157,16 @@ const Edit = React.memo(({ commentId, onClose }) => {
         <Button
           {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
           positive
-          ref={handleButtonRef}
+          ref={handleSubmitButtonRef}
           content={t('action.save')}
         />
+        <Button
+          {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+          ref={handleCancelButtonRef}
+          type="button"
+          content={t('action.cancel')}
+          onClick={handleCancelClick}
+        />
       </div>
     </Form>
   );