Fix <InputColor/> issues when trying to close picker.

src/components/Block.jsx

@@ -40,6 +40,23 @@ export default class Block extends React.Component {
     });
   }
 
+  /**
+   * Some fields for example <InputColor/> bind click events inside the element
+   * to close the picker. This in turn propagates to the <label/> element
+   * causing the picker to reopen. This causes a scenario where the picker can
+   * never be closed once open.
+   */
+  onLabelClick = (event) => {
+    const el = event.nativeEvent.target;
+    const nativeEvent = event.nativeEvent;
+    const contains = this._blockEl.contains(el);
+
+    if (contains) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+
   render() {
     const errors = [].concat(this.props.error || []);
 
@@ -51,11 +68,11 @@ export default class Block extends React.Component {
         "maputnik-action-block": this.props.action
       })}
     >
-      <label>
+      <label onClick={this.onLabelClick}>
         <div className="maputnik-input-block-label">
           {this.props.label}
         </div>
-        <div className="maputnik-input-block-content">
+        <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
           {this.props.children}
         </div>
       </label>