From 4e4ae0a7d05e1952508f26f739fc5fc758c55845 Mon Sep 17 00:00:00 2001
From: Kipras Melnikovas <kipras@kipras.org>
Date: Sun, 28 Mar 2021 20:07:09 +0300
Subject: [PATCH] Toggle the checkbox when clicking on the label

Pretty sure the `user-select: none` could be employed
in other places aswell

Signed-off-by: Kipras Melnikovas <kipras@kipras.org>
---
 components/common/Checkbox.js         | 6 ++++--
 components/common/Checkbox.module.css | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/common/Checkbox.js b/components/common/Checkbox.js
index 67eea80d..9b76e805 100644
--- a/components/common/Checkbox.js
+++ b/components/common/Checkbox.js
@@ -7,12 +7,14 @@ import styles from './Checkbox.module.css';
 function Checkbox({ name, value, label, onChange }) {
   const ref = useRef();
 
+  const onClick = () => ref.current.click();
+
   return (
     <div className={styles.container}>
-      <div className={styles.checkbox} onClick={() => ref.current.click()}>
+      <div className={styles.checkbox} onClick={onClick}>
         {value && <Icon icon={<Check />} size="small" />}
       </div>
-      <label className={styles.label} htmlFor={name}>
+      <label className={styles.label} htmlFor={name} onClick={onClick}>
         {label}
       </label>
       <input
diff --git a/components/common/Checkbox.module.css b/components/common/Checkbox.module.css
index 267a4054..c9a01eac 100644
--- a/components/common/Checkbox.module.css
+++ b/components/common/Checkbox.module.css
@@ -17,6 +17,7 @@
 
 .label {
   margin-left: 10px;
+  user-select: none; /* disable text selection when clicking to toggle the checkbox */
 }
 
 .input {