From 218ce148d5a4a03f448cb3389b8bb3384efa5107 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Fri, 19 Oct 2018 08:39:07 +0100
Subject: [PATCH] Delay modal close until blur events have triggered.

---
 src/components/modals/Modal.jsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/modals/Modal.jsx b/src/components/modals/Modal.jsx
index b3518ae..7fc1393 100644
--- a/src/components/modals/Modal.jsx
+++ b/src/components/modals/Modal.jsx
@@ -19,6 +19,17 @@ class Modal extends React.Component {
     underlayClickExits: true
   }
 
+  // See <https://github.com/maputnik/editor/issues/416>
+  onClose = () => {
+    if (document.activeElement) {
+      document.activeElement.blur();
+    }
+
+    setImmediate(() => {
+      this.props.onOpenToggle(false);
+    });
+  }
+
   getApplicationNode() {
     return document.getElementById('app');
   }
@@ -32,7 +43,7 @@ class Modal extends React.Component {
         getApplicationNode={this.getApplicationNode}
         data-wd-key={this.props["data-wd-key"]}
         verticallyCenter={true}
-        onExit={() => this.props.onOpenToggle(false)}
+        onExit={this.onClose}
       >
         <div className="maputnik-modal"
           data-wd-key={this.props["data-wd-key"]}
@@ -41,7 +52,7 @@ class Modal extends React.Component {
             <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
             <span className="maputnik-modal-header-space"></span>
             <button className="maputnik-modal-header-toggle"
-              onClick={() => this.props.onOpenToggle(false)}
+              onClick={this.onClose}
               data-wd-key={this.props["data-wd-key"]+".close-modal"}
             >
               <MdClose />