From e6e560e3edf920778ed117509b933455cc684cae Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 26 Jan 2023 09:23:53 +0000
Subject: [PATCH] Dropdown: Make escape close a dropdown (#62098)

* make escape close a dropdown

* make tab close the dropdown
---
 .../grafana-ui/src/components/Dropdown/Dropdown.tsx    | 10 ++++++++--
 packages/grafana-ui/src/components/Menu/hooks.ts       |  3 +--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
index b714d3dfb5d..01bdef10bec 100644
--- a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
@@ -36,6 +36,12 @@ export const Dropdown = React.memo(({ children, overlay, placement }: Props) =>
     setShow(false);
   };
 
+  const handleKeys = (event: React.KeyboardEvent) => {
+    if (event.key === 'Escape' || event.key === 'Tab') {
+      setShow(false);
+    }
+  };
+
   return (
     <>
       {React.cloneElement(typeof children === 'function' ? children(visible) : children, {
@@ -43,13 +49,13 @@ export const Dropdown = React.memo(({ children, overlay, placement }: Props) =>
       })}
       {visible && (
         <Portal>
-          <FocusScope autoFocus>
+          <FocusScope autoFocus restoreFocus contain>
             {/*
               this is handling bubbled events from the inner overlay
               see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events
             */}
             {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
-            <div ref={setTooltipRef} {...getTooltipProps()} onClick={onOverlayClicked}>
+            <div ref={setTooltipRef} {...getTooltipProps()} onClick={onOverlayClicked} onKeyDown={handleKeys}>
               <div {...getArrowProps({ className: 'tooltip-arrow' })} />
               <CSSTransition
                 nodeRef={transitionRef}
diff --git a/packages/grafana-ui/src/components/Menu/hooks.ts b/packages/grafana-ui/src/components/Menu/hooks.ts
index 3ca3d2baf5b..f4983e80ff5 100644
--- a/packages/grafana-ui/src/components/Menu/hooks.ts
+++ b/packages/grafana-ui/src/components/Menu/hooks.ts
@@ -98,11 +98,10 @@ export const useMenuFocus = ({
         menuItems?.[focusedItem]?.click();
         break;
       case 'Escape':
-        event.preventDefault();
-        event.stopPropagation();
         onClose?.();
         break;
       case 'Tab':
+        event.preventDefault();
         onClose?.();
         break;
       default: