From 06bccfab10704aac58996739d94755a56c301c28 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 19:20:42 +0100
Subject: [PATCH] Fix for checkboxes within non-clickable label

---
 src/components/Block.jsx         | 29 ++++++++++++++---------------
 src/components/InputCheckbox.jsx |  7 ++++++-
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/Block.jsx b/src/components/Block.jsx
index 06b77f9..bfa85ba 100644
--- a/src/components/Block.jsx
+++ b/src/components/Block.jsx
@@ -51,35 +51,34 @@ export default class Block extends React.Component {
     const nativeEvent = event.nativeEvent;
     const contains = this._blockEl.contains(el);
 
-    if (event.nativeEvent.target.nodeName !== "INPUT" && contains) {
+    if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
       event.stopPropagation();
-      event.preventDefault();
     }
+		event.preventDefault();
   }
 
   render() {
     const errors = [].concat(this.props.error || []);
 
-    return <div style={this.props.style}
+    return <label style={this.props.style}
       data-wd-key={this.props["data-wd-key"]}
       className={classnames({
         "maputnik-input-block": true,
         "maputnik-input-block--wide": this.props.wideMode,
         "maputnik-action-block": this.props.action
       })}
+      onClick={this.onLabelClick}
     >
-      <label onClick={this.onLabelClick}>
-        <div className="maputnik-input-block-label">
-          {this.props.label}
-        </div>
-        <div className="maputnik-input-block-action">
-          {this.props.action}
-        </div>
-        <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
-          {this.props.children}
-        </div>
-      </label>
-    </div>
+      <div className="maputnik-input-block-label">
+        {this.props.label}
+      </div>
+      <div className="maputnik-input-block-action">
+        {this.props.action}
+      </div>
+      <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
+        {this.props.children}
+      </div>
+    </label>
   }
 }
 
diff --git a/src/components/InputCheckbox.jsx b/src/components/InputCheckbox.jsx
index 7cf8323..d930896 100644
--- a/src/components/InputCheckbox.jsx
+++ b/src/components/InputCheckbox.jsx
@@ -12,13 +12,18 @@ export default class InputCheckbox extends React.Component {
     value: false,
   }
 
+  onChange = () => {
+    this.props.onChange(!this.props.value);
+  }
+
   render() {
     return <div className="maputnik-checkbox-wrapper">
       <input
         className="maputnik-checkbox"
         type="checkbox"
         style={this.props.style}
-        onChange={e => this.props.onChange(!this.props.value)}
+        onChange={this.onChange}
+        onClick={this.onChange}
         checked={this.props.value}
       />
       <div className="maputnik-checkbox-box">