Keybindings: Improve esc / exit / blur logic (#19320)

* Keybindings: Improve esc / exit / blur logic

* Slight modifications

* removed use of jquery

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 {

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 || []}

public/app/core/services/keybindingSrv.ts

-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) {

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;

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"