From 08cc4f0c8a50e4832895312e84626982418bda79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 24 Sep 2019 09:03:14 +0200
Subject: [PATCH] Keybindings: Improve esc / exit / blur logic (#19320)

* Keybindings: Improve esc / exit / blur logic

* Slight modifications

* removed use of jquery
---
 .../src/components/Select/_Select.scss        |  4 +--
 .../ReduceTransformerEditor.tsx               |  2 +-
 public/app/core/services/keybindingSrv.ts     | 33 +++++++++++++++----
 public/app/features/explore/Typeahead.tsx     |  3 ++
 yarn.lock                                     |  6 ----
 5 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/_Select.scss b/packages/grafana-ui/src/components/Select/_Select.scss
index a4254eb004d0b..0086de6298321 100644
--- a/packages/grafana-ui/src/components/Select/_Select.scss
+++ b/packages/grafana-ui/src/components/Select/_Select.scss
@@ -83,9 +83,9 @@ $select-input-bg-disabled: $input-bg-disabled;
 .gf-form-select-box__multi-value__remove {
   text-align: center;
   display: inline-block;
-  height: 14px;
-  vertical-align: middle;
   margin-left: 2px;
+  position: relative;
+  top: 3px;
 }
 
 .gf-form-select-box__multi-value__label {
diff --git a/packages/grafana-ui/src/components/TransformersUI/ReduceTransformerEditor.tsx b/packages/grafana-ui/src/components/TransformersUI/ReduceTransformerEditor.tsx
index 484dd10077f3e..5b28d0643b5a2 100644
--- a/packages/grafana-ui/src/components/TransformersUI/ReduceTransformerEditor.tsx
+++ b/packages/grafana-ui/src/components/TransformersUI/ReduceTransformerEditor.tsx
@@ -11,7 +11,7 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
 }) => {
   return (
     <StatsPicker
-      width={12}
+      width={25}
       placeholder="Choose Stat"
       allowMultiple
       stats={options.reducers || []}
diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts
index f3aa11f229885..b1700f3d33dc8 100644
--- a/public/app/core/services/keybindingSrv.ts
+++ b/public/app/core/services/keybindingSrv.ts
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import _ from 'lodash';
 
 import coreModule from 'app/core/core_module';
@@ -47,9 +46,36 @@ export class KeybindingSrv {
       this.bind('s o', this.openSearch);
       this.bind('f', this.openSearch);
       this.bind('esc', this.exit);
+      this.bindGlobal('esc', this.globalEsc);
     }
   }
 
+  globalEsc() {
+    const anyDoc = document as any;
+    const activeElement = anyDoc.activeElement;
+
+    // typehead needs to handle it
+    const typeaheads = document.querySelectorAll('.slate-typeahead--open');
+    if (typeaheads.length > 0) {
+      return;
+    }
+
+    // second check if we are in an input we can blur
+    if (activeElement && activeElement.blur) {
+      if (
+        activeElement.nodeName === 'INPUT' ||
+        activeElement.nodeName === 'TEXTAREA' ||
+        activeElement.hasAttribute('data-slate-editor')
+      ) {
+        anyDoc.activeElement.blur();
+        return;
+      }
+    }
+
+    // ok no focused input or editor that should block this, let exist!
+    this.exit();
+  }
+
   openSearch() {
     appEvents.emit('show-dash-search');
   }
@@ -71,11 +97,6 @@ export class KeybindingSrv {
   }
 
   exit() {
-    const popups = $('.popover.in, .slate-typeahead');
-    if (popups.length > 0) {
-      return;
-    }
-
     appEvents.emit('hide-modal');
 
     if (this.modalOpen) {
diff --git a/public/app/features/explore/Typeahead.tsx b/public/app/features/explore/Typeahead.tsx
index e136ed647e5e6..412436585fed4 100644
--- a/public/app/features/explore/Typeahead.tsx
+++ b/public/app/features/explore/Typeahead.tsx
@@ -215,7 +215,10 @@ class Portal extends React.PureComponent<PortalProps, {}> {
   render() {
     if (this.props.isOpen) {
       this.node.setAttribute('style', this.props.style);
+      this.node.classList.add(`slate-typeahead--open`);
       return ReactDOM.createPortal(this.props.children, this.node);
+    } else {
+      this.node.classList.remove(`slate-typeahead--open`);
     }
 
     return null;
diff --git a/yarn.lock b/yarn.lock
index 150d44cec75c5..5226dd7760ccf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15138,12 +15138,6 @@ react-popper@^1.3.3:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
-react-portal@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-3.2.0.tgz#4224e19b2b05d5cbe730a7ba0e34ec7585de0043"
-  dependencies:
-    prop-types "^15.5.8"
-
 react-redux@7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.1.tgz#ce6eee1b734a7a76e0788b3309bf78ff6b34fa0a"