Dropdown: Make escape close a dropdown (#62098)

* make escape close a dropdown

* make tab close the dropdown

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}

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: