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 && ( - + {/* 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 */} -
+