[Enhancement #60] QuestionCommentIcon is no longer clashing with Chec…

…kboxAnswer nor Bootstrap's Accordion
kbss-cvut · Oct 12, 2021 · 7db4739 · 7db4739
1 parent 1926210
commit 7db4739
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/src/components/Answer.jsx b/src/components/Answer.jsx
@@ -20,8 +20,6 @@ const Answer = (props) => {
   const formGenContext = React.useContext(FormGenContext);
   const { options } = React.useContext(ConfigurationContext);
 
-  const [mouseHover, setMouseHover] = React.useState(false);
-
   const onValueChange = (value) => {
     const change = { ...props.answer };
     _setValue(change, value);
@@ -43,10 +41,6 @@ const Answer = (props) => {
     }
   };
 
-  const onMouseHoverHandler = () => {
-    setMouseHover(!mouseHover);
-  }
-
   const _hasOptions = (item) => {
     return item[Constants.HAS_OPTION] && item[Constants.HAS_OPTION].length !== 0;
   };
@@ -82,7 +76,7 @@ const Answer = (props) => {
 
   const _renderCheckbox = (value, label, title) => {
     return (
-      <CheckboxAnswer label={label} title={title} value={value} onChange={onValueChange} question={props.question} mouseHover={mouseHover}/>
+      <CheckboxAnswer label={label} title={title} value={value} onChange={onValueChange} question={props.question} />
     );
   };
 
@@ -155,7 +149,7 @@ const Answer = (props) => {
       <div>
         <span>{label}</span>
         {questionHelp}
-        <QuestionCommentIcon question={question} onChange={props.onCommentChange} onMouseHover={onMouseHoverHandler}/>
+        <QuestionCommentIcon question={question} onChange={props.onCommentChange} />
       </div>
     );
   }

diff --git a/src/components/answer/CheckboxAnswer.jsx b/src/components/answer/CheckboxAnswer.jsx
@@ -29,7 +29,7 @@ const CheckboxAnswer = (props) => {
     onChange: (e) => {
       props.onChange(e.target.checked);
     },
-    disabled: componentsOptions.readOnly || FormUtils.isDisabled(question) || props.mouseHover
+    disabled: componentsOptions.readOnly || FormUtils.isDisabled(question)
   });
 };
 

diff --git a/src/components/comment/CommentForm.jsx b/src/components/comment/CommentForm.jsx
@@ -62,7 +62,7 @@ const CommentForm = (props) => {
                         />
                     </Row>
                     <Row className="send-comment-arrow col-lg-12">
-                        <Button className="comment-button" variant="light" type="submit" >
+                        <Button className="comment-button" variant="primary" type="submit" >
                             <ArrowRight />
                         </Button>
                     </Row>

diff --git a/src/components/comment/QuestionCommentIcon.jsx b/src/components/comment/QuestionCommentIcon.jsx
@@ -60,9 +60,15 @@ const QuestionCommentIcon = (props) => {
         }
     };
 
+    const onClickHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShow(!show);
+    }
+
     return (
         <>
-            <span ref={target} onClick={() => setShow(!show)} onMouseEnter={props.onMouseHover} onMouseLeave={props.onMouseHover}>
+            <span ref={target} onClick={onClickHandler}>
                 <CommentBubble />
             </span>