From 34a0fa1dc40fe86cbac14fe397ae6792fdea5563 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 31 Jul 2019 20:49:41 +0100
Subject: [PATCH] fix(ui): disable hotkeys when modal is hidden

HotKeys component needs to be unmounted on hide, otherwise we might have multiple modals responding to key events
---
 ui/src/Components/Modal/index.js | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/ui/src/Components/Modal/index.js b/ui/src/Components/Modal/index.js
index 3fc64b181..7a66373bb 100644
--- a/ui/src/Components/Modal/index.js
+++ b/ui/src/Components/Modal/index.js
@@ -59,22 +59,24 @@ const Modal = observer(
       const { size, isOpen, toggleOpen, children, ...props } = this.props;
 
       return ReactDOM.createPortal(
-        <HotKeys
-          innerRef={this.HotKeysRef}
-          keyMap={{ CLOSE: "Escape" }}
-          handlers={{ CLOSE: toggleOpen }}
-        >
+        <React.Fragment>
           <MountModal in={isOpen} unmountOnExit {...props}>
-            <div ref={this.modalRef} className="modal d-block" role="dialog">
-              <div className={`modal-dialog modal-${size}`} role="document">
-                <div className="modal-content">{children}</div>
+            <HotKeys
+              innerRef={this.HotKeysRef}
+              keyMap={{ CLOSE: "Escape" }}
+              handlers={{ CLOSE: toggleOpen }}
+            >
+              <div ref={this.modalRef} className="modal d-block" role="dialog">
+                <div className={`modal-dialog modal-${size}`} role="document">
+                  <div className="modal-content">{children}</div>
+                </div>
               </div>
-            </div>
+            </HotKeys>
           </MountModal>
           <MountModalBackdrop in={isOpen} unmountOnExit>
             <div className="modal-backdrop d-block" />
           </MountModalBackdrop>
-        </HotKeys>,
+        </React.Fragment>,
         document.body
       );
     }