From f911ed3522dec0b639e0a921f38026d1044aad6a Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 10:10:40 +0100
Subject: [PATCH] Fix <InputColor/> issues when trying to close picker.

---
 src/components/Block.jsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/Block.jsx b/src/components/Block.jsx
index 4f798d09..878d98fb 100644
--- a/src/components/Block.jsx
+++ b/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>