From 24791d93e65f805dd03acfb64bbf7fc85a0f48a2 Mon Sep 17 00:00:00 2001
From: Lukas Siatka <lukasz.siatka@grafana.com>
Date: Mon, 4 May 2020 04:26:51 +0200
Subject: [PATCH] Chore: adds event listeners allowing to exit log row context
 with ESC key

---
 .../src/components/Logs/LogRowContext.tsx         | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
index 2212ab68112..1f72c78cb09 100644
--- a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useState, useLayoutEffect } from 'react';
+import React, { useContext, useRef, useState, useLayoutEffect, useEffect } from 'react';
 import { LogRowModel } from '@grafana/data';
 import { css, cx } from 'emotion';
 
@@ -197,6 +197,19 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
   onLoadMoreContext,
   hasMoreContextRows,
 }) => {
+  const handleEscKeyDown = (e: KeyboardEvent): void => {
+    if (e.keyCode === 27) {
+      onOutsideClick();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleEscKeyDown, false);
+    return () => {
+      document.removeEventListener('keydown', handleEscKeyDown, false);
+    };
+  }, []);
+
   return (
     <ClickOutsideWrapper onClick={onOutsideClick}>
       <div>