From dd142b92ae1176a09cf8773b22fe407ca47d002c Mon Sep 17 00:00:00 2001
From: Marco Liberati <dej611@users.noreply.github.com>
Date: Thu, 15 Apr 2021 14:29:40 +0200
Subject: [PATCH] [Lens] Close dimension panel on escape key (#96783)

* :sparkles: Close panel on escape key

* :ok_hand: Stabilize callback ref

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../config_panel/dimension_container.tsx      | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
index 574cd4029223..f66e8ba87e8e 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
@@ -7,7 +7,7 @@
 
 import './dimension_container.scss';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   EuiFlyoutHeader,
   EuiFlyoutFooter,
@@ -18,6 +18,8 @@ import {
   EuiFlexItem,
   EuiFocusTrap,
   EuiOutsideClickDetector,
+  EuiWindowEvent,
+  keys,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -35,10 +37,10 @@ export function DimensionContainer({
 }) {
   const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false);
 
-  const closeFlyout = () => {
+  const closeFlyout = useCallback(() => {
     handleClose();
     setFocusTrapIsEnabled(false);
-  };
+  }, [handleClose]);
 
   useEffect(() => {
     if (isOpen) {
@@ -49,8 +51,19 @@ export function DimensionContainer({
     }
   }, [isOpen]);
 
+  const closeOnEscape = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === keys.ESCAPE) {
+        event.preventDefault();
+        closeFlyout();
+      }
+    },
+    [closeFlyout]
+  );
+
   return isOpen ? (
     <EuiFocusTrap disabled={!focusTrapIsEnabled} clickOutsideDisables={true}>
+      <EuiWindowEvent event="keydown" handler={closeOnEscape} />
       <EuiOutsideClickDetector onOutsideClick={closeFlyout} isDisabled={!isOpen}>
         <div
           role="dialog"