From 1afc590c703731cd2026fb8286388e1db6afc09f Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 30 Jan 2019 15:38:59 +0100
Subject: [PATCH] fix: Don't open panel menu when dragging (react-)panel in
 dashboard #14946

---
 .../dashgrid/PanelHeader/PanelHeader.tsx      | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index b5cd9258c08..6dd4af2dc03 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
+import { isEqual } from 'lodash';
 
 import PanelHeaderCorner from './PanelHeaderCorner';
 import { PanelHeaderMenu } from './PanelHeaderMenu';
@@ -19,21 +20,45 @@ export interface Props {
   links?: [];
 }
 
+interface ClickCoordinates {
+  x: number;
+  y: number;
+}
+
 interface State {
   panelMenuOpen: boolean;
 }
 
 export class PanelHeader extends Component<Props, State> {
+  clickCoordinates: ClickCoordinates = {x: 0, y: 0};
   state = {
     panelMenuOpen: false,
+    clickCoordinates: {x: 0, y: 0}
   };
 
-  onMenuToggle = event => {
-    event.stopPropagation();
+  eventToClickCoordinates = (event: React.MouseEvent<HTMLDivElement>) => {
+    return {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }
 
-    this.setState(prevState => ({
-      panelMenuOpen: !prevState.panelMenuOpen,
-    }));
+  onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+    this.clickCoordinates = this.eventToClickCoordinates(event);
+  };
+
+  isClick = (clickCoordinates: ClickCoordinates) => {
+    return isEqual(clickCoordinates, this.clickCoordinates);
+  }
+
+  onMenuToggle = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (this.isClick(this.eventToClickCoordinates(event))) {
+      event.stopPropagation();
+
+      this.setState(prevState => ({
+        panelMenuOpen: !prevState.panelMenuOpen,
+      }));
+    }
   };
 
   closeMenu = () => {
@@ -64,7 +89,7 @@ export class PanelHeader extends Component<Props, State> {
               <i className="fa fa-spinner fa-spin" />
             </span>
           )}
-          <div className="panel-title-container" onClick={this.onMenuToggle}>
+          <div className="panel-title-container" onClick={this.onMenuToggle} onMouseDown={this.onMouseDown}>
             <div className="panel-title">
               <span className="icon-gf panel-alert-icon" />
               <span className="panel-title-text">