From 3e6bb78e3dc9a424ae76e68847ae57a4ef5a466e Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 4 Oct 2021 16:52:26 -0400
Subject: [PATCH] TimePicker: Close timepicker with esc (#39962) (#39969)

(cherry picked from commit 3cd7b11eb466f12472f8659a33f03370da9b89fe)

Co-authored-by: Oscar Kilhed <oscar.kilhed@grafana.com>
---
 .../components/DateTimePickers/TimeRangePicker.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
index 16e97daec96..5cd99ef46e1 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
@@ -66,6 +66,20 @@ export class UnthemedTimeRangePicker extends PureComponent<TimeRangePickerProps,
     this.setState({ isOpen: !isOpen });
   };
 
+  componentDidMount() {
+    window.addEventListener('keyup', this.onKeyUp);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keyup', this.onKeyUp);
+  }
+
+  onKeyUp = (event: KeyboardEvent) => {
+    if (event.code === 'Escape') {
+      this.onClose();
+    }
+  };
+
   onClose = () => {
     this.setState({ isOpen: false });
   };