From 262a42b24903164eefb539394ae0fd0022338c43 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Thu, 27 Aug 2020 09:18:34 +0100
Subject: [PATCH] UI/ClickOutsideWrapper: Adds parent prop for situations where
 event should be on document (#27221)

---
 .../ClickOutsideWrapper/ClickOutsideWrapper.tsx       | 11 +++++++----
 .../dashboard/dashgrid/PanelHeader/PanelHeader.tsx    |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx b/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
index a57535037f2..2b69c038654 100644
--- a/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
+++ b/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
@@ -10,6 +10,7 @@ export interface Props {
    *  Runs the 'onClick' function when pressing a key outside of the current element. Defaults to true.
    */
   includeButtonPress: boolean;
+  parent: Window | Document;
 }
 
 interface State {
@@ -19,22 +20,24 @@ interface State {
 export class ClickOutsideWrapper extends PureComponent<Props, State> {
   static defaultProps = {
     includeButtonPress: true,
+    parent: window,
   };
   state = {
     hasEventListener: false,
   };
 
   componentDidMount() {
-    document.addEventListener('mousedown', this.onOutsideClick, false);
+    this.props.parent.addEventListener('click', this.onOutsideClick, false);
     if (this.props.includeButtonPress) {
-      document.addEventListener('keydown', this.onOutsideClick, false);
+      // Use keyup since keydown already has an eventlistener on window
+      this.props.parent.addEventListener('keyup', this.onOutsideClick, false);
     }
   }
 
   componentWillUnmount() {
-    document.removeEventListener('mousedown', this.onOutsideClick, false);
+    this.props.parent.removeEventListener('click', this.onOutsideClick, false);
     if (this.props.includeButtonPress) {
-      document.removeEventListener('keydown', this.onOutsideClick, false);
+      this.props.parent.removeEventListener('keyup', this.onOutsideClick, false);
     }
   }
 
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index addead2f717..43267e8ee16 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -180,7 +180,7 @@ export class PanelHeader extends Component<Props, State> {
               <span className="panel-title-text">{title}</span>
               <Icon name="angle-down" className="panel-menu-toggle" />
               {this.state.panelMenuOpen && (
-                <ClickOutsideWrapper onClick={this.closeMenu}>
+                <ClickOutsideWrapper onClick={this.closeMenu} parent={document}>
                   <PanelHeaderMenu items={menuItems} />
                 </ClickOutsideWrapper>
               )}