[New #92] Added support of Esc key in comment dialogs

kbss-cvut · Feb 2, 2022 · 04959f6 · 04959f6
1 parent d22e5cb
commit 04959f6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/comment/CommentForm.jsx b/src/components/comment/CommentForm.jsx
@@ -46,7 +46,7 @@ const CommentForm = (props) => {
                                 className="comment-form-control"
                                 name="comment"
                                 as="textarea"
-                                placeholder="Write your comments here  (Ctrl+Enter to confirm)"
+                                placeholder="Write your comments here  (Ctrl+Enter to confirm, Esc to cancel)"
                                 required
                                 value={commentValue}
                                 onChange={onValueChange}

diff --git a/src/components/comment/QuestionCommentIcon.jsx b/src/components/comment/QuestionCommentIcon.jsx
@@ -80,6 +80,12 @@ const QuestionCommentIcon = (props) => {
     } else setOverlayPlacement('right');
   };
 
+  const onKeyDownHandler = (e) => {
+      if (e.key === 'Escape') {
+          hideOverlay();
+      }
+  };
+
     return (
         <div ref={overlayTarget} onClick={stopPropagation}>
             <span ref={target} onClick={onClickSetShowHandler}>
@@ -96,7 +102,7 @@ const QuestionCommentIcon = (props) => {
                 <Overlay target={target.current} show={show} placement={overlayPlacement} rootClose={false} onHide={hideOverlay} container={dragRef}>
                     {(overlayProps) => (
                         <Tooltip className="comment-tooltip" {...overlayProps}>
-                        <span>
+                        <span onKeyDown={(e) => {onKeyDownHandler(e)}}>
                             <motion.div
                                 className="close-comment-icon"
                                 onClick={hideOverlay}