bounnd the esc key to exit timepicker

public/app/core/services/keybindingSrv.ts

@@ -10,6 +10,7 @@ import 'mousetrap-global-bind';
 export class KeybindingSrv {
   helpModal: boolean;
   modalOpen = false;
+  timepickerOpen = false;
 
   /** @ngInject */
   constructor(private $rootScope, private $location) {
@@ -22,6 +23,7 @@ export class KeybindingSrv {
 
     this.setupGlobal();
     appEvents.on('show-modal', () => (this.modalOpen = true));
+    $rootScope.onAppEvent('openTimepicker', () => (this.timepickerOpen = true));
   }
 
   setupGlobal() {
@@ -72,6 +74,11 @@ export class KeybindingSrv {
 
     appEvents.emit('hide-modal');
 
+    if (this.timepickerOpen === true) {
+      this.$rootScope.appEvent('closeTimepicker');
+      this.timepickerOpen = false;
+    }
+
     if (!this.modalOpen) {
       this.$rootScope.appEvent('panel-change-view', { fullscreen: false, edit: false });
     } else {

public/app/features/dashboard/timepicker/timepicker.ts

@@ -32,6 +32,7 @@ export class TimePickerCtrl {
     $rootScope.onAppEvent('shift-time-forward', () => this.move(1), $scope);
     $rootScope.onAppEvent('shift-time-backward', () => this.move(-1), $scope);
     $rootScope.onAppEvent('refresh', this.onRefresh.bind(this), $scope);
+    $rootScope.onAppEvent('closeTimepicker', this.openDropdown.bind(this), $scope);
 
     // init options
     this.panel = this.dashboard.timepicker;
@@ -100,6 +101,8 @@ export class TimePickerCtrl {
       return;
     }
 
+    this.$rootScope.appEvent('openTimepicker');
+
     this.onRefresh();
     this.editTimeRaw = this.timeRaw;
     this.timeOptions = rangeUtil.getRelativeTimesList(this.panel, this.rangeString);