From 5f4526ca64302fc8ffd72a4a66d0d11ae6cf9a2e Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Fri, 22 May 2020 16:20:48 +0200
Subject: [PATCH] PanelMenu: Make menu disappear on button press (#25015)

* Fix button press outside

* Add a prop to toggle button press

* Add comments

* Remove public
---
 .../ClickOutsideWrapper/ClickOutsideWrapper.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx b/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
index c435be0f384..6836f56a69e 100644
--- a/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
+++ b/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
@@ -2,7 +2,14 @@ import { PureComponent } from 'react';
 import ReactDOM from 'react-dom';
 
 export interface Props {
+  /**
+   *  When clicking outside of current element
+   */
   onClick: () => void;
+  /**
+   *  Runs the 'onClick' function when pressing a key outside of the current element. Defaults to true.
+   */
+  includeButtonPress: boolean;
 }
 
 interface State {
@@ -10,16 +17,26 @@ interface State {
 }
 
 export class ClickOutsideWrapper extends PureComponent<Props, State> {
+  static defaultProps = {
+    includeButtonPress: true,
+  };
   state = {
     hasEventListener: false,
   };
 
   componentDidMount() {
     window.addEventListener('click', this.onOutsideClick, false);
+    if (this.props.includeButtonPress) {
+      // Use keyup since keydown already has an eventlistener on window
+      window.addEventListener('keyup', this.onOutsideClick, false);
+    }
   }
 
   componentWillUnmount() {
     window.removeEventListener('click', this.onOutsideClick, false);
+    if (this.props.includeButtonPress) {
+      window.addEventListener('keyup', this.onOutsideClick, false);
+    }
   }
 
   onOutsideClick = (event: any) => {