From e2ffaef88a0a67a9b155c0ce115bb3654d6af9b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Tue, 5 Feb 2019 15:25:19 +0100
Subject: [PATCH 1/3] Fixed so that we close angular TimePicker when user
 clicks outside the dropdown

---
 public/app/routes/GrafanaCtrl.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/public/app/routes/GrafanaCtrl.ts b/public/app/routes/GrafanaCtrl.ts
index 70bdf49e5e4..a860ba87e6b 100644
--- a/public/app/routes/GrafanaCtrl.ts
+++ b/public/app/routes/GrafanaCtrl.ts
@@ -280,6 +280,24 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
         if (popover.length > 0 && target.parents('.graph-legend').length === 0) {
           popover.hide();
         }
+
+        // hide time picker
+        const timePickerDropDownIsOpen = elem.find('.gf-timepicker-dropdown').length > 0;
+        const targetIsInTimePickerDropDown = target.parents('.gf-timepicker-dropdown').length > 0;
+        const targetIsInTimePickerNav = target.parents('.gf-timepicker-nav').length > 0;
+        const targetIsDatePickerRowBtn = target.parents('td[id^="datepicker-"]').length > 0;
+        const targetIsDatePickerHeaderBtn = target.parents('button[id^="datepicker-"]').length > 0;
+        if (
+          timePickerDropDownIsOpen &&
+          !targetIsInTimePickerNav &&
+          !targetIsInTimePickerDropDown &&
+          !targetIsDatePickerRowBtn &&
+          !targetIsDatePickerHeaderBtn
+        ) {
+          scope.$apply(() => {
+            scope.appEvent('closeTimepicker');
+          });
+        }
       });
     },
   };

From a344091d82e74a8054fed8279ca271a41278980e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Tue, 5 Feb 2019 15:29:19 +0100
Subject: [PATCH 2/3] Optimized so we only do checks when dropdown is opened

---
 public/app/routes/GrafanaCtrl.ts | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/public/app/routes/GrafanaCtrl.ts b/public/app/routes/GrafanaCtrl.ts
index a860ba87e6b..c6945f26d08 100644
--- a/public/app/routes/GrafanaCtrl.ts
+++ b/public/app/routes/GrafanaCtrl.ts
@@ -283,17 +283,21 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
 
         // hide time picker
         const timePickerDropDownIsOpen = elem.find('.gf-timepicker-dropdown').length > 0;
-        const targetIsInTimePickerDropDown = target.parents('.gf-timepicker-dropdown').length > 0;
-        const targetIsInTimePickerNav = target.parents('.gf-timepicker-nav').length > 0;
-        const targetIsDatePickerRowBtn = target.parents('td[id^="datepicker-"]').length > 0;
-        const targetIsDatePickerHeaderBtn = target.parents('button[id^="datepicker-"]').length > 0;
-        if (
-          timePickerDropDownIsOpen &&
-          !targetIsInTimePickerNav &&
-          !targetIsInTimePickerDropDown &&
-          !targetIsDatePickerRowBtn &&
-          !targetIsDatePickerHeaderBtn
-        ) {
+        if (timePickerDropDownIsOpen) {
+          const targetIsInTimePickerDropDown = target.parents('.gf-timepicker-dropdown').length > 0;
+          const targetIsInTimePickerNav = target.parents('.gf-timepicker-nav').length > 0;
+          const targetIsDatePickerRowBtn = target.parents('td[id^="datepicker-"]').length > 0;
+          const targetIsDatePickerHeaderBtn = target.parents('button[id^="datepicker-"]').length > 0;
+
+          if (
+            targetIsInTimePickerNav ||
+            targetIsInTimePickerDropDown ||
+            targetIsDatePickerRowBtn ||
+            targetIsDatePickerHeaderBtn
+          ) {
+            return;
+          }
+
           scope.$apply(() => {
             scope.appEvent('closeTimepicker');
           });

From e42b670f5c29df535d4cb5477077011ab5ec9842 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Tue, 5 Feb 2019 15:41:00 +0100
Subject: [PATCH 3/3] Closing timepicker when clicking outside the picker

---
 public/app/features/explore/ExploreToolbar.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx
index 35f06d11c81..4d9620e311e 100644
--- a/public/app/features/explore/ExploreToolbar.tsx
+++ b/public/app/features/explore/ExploreToolbar.tsx
@@ -8,6 +8,7 @@ import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { StoreState } from 'app/types/store';
 import { changeDatasource, clearQueries, splitClose, runQueries, splitOpen } from './state/actions';
 import TimePicker from './TimePicker';
+import { ClickOutsideWrapper } from 'app/core/components/ClickOutsideWrapper/ClickOutsideWrapper';
 
 enum IconSide {
   left = 'left',
@@ -79,6 +80,10 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
     this.props.runQuery(this.props.exploreId);
   };
 
+  onCloseTimePicker = () => {
+    this.props.timepickerRef.current.setState({ isOpen: false });
+  };
+
   render() {
     const {
       datasourceMissing,
@@ -137,7 +142,9 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
               </div>
             ) : null}
             <div className="explore-toolbar-content-item timepicker">
-              <TimePicker ref={timepickerRef} range={range} onChangeTime={this.props.onChangeTime} />
+              <ClickOutsideWrapper onClick={this.onCloseTimePicker}>
+                <TimePicker ref={timepickerRef} range={range} onChangeTime={this.props.onChangeTime} />
+              </ClickOutsideWrapper>
             </div>
             <div className="explore-toolbar-content-item">
               <button className="btn navbar-button navbar-button--no-icon" onClick={this.onClearAll}>