From 888eb9d94c4f48138b09c1a389332e536b19fc23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 14 Nov 2018 13:31:40 +0100
Subject: [PATCH] fixed panel focus for react panels

---
 .../dashboard/dashgrid/DashboardPanel.tsx     | 19 +++++++++++++++++--
 public/app/features/panel/panel_directive.ts  | 13 -------------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
index 877d906a080..c8c3809fcc4 100644
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
@@ -117,6 +117,14 @@ export class DashboardPanel extends PureComponent<Props, State> {
     this.cleanUpAngularPanel();
   }
 
+  onMouseEnter = () => {
+    this.props.dashboard.setPanelFocus(this.props.panel.id);
+  };
+
+  onMouseLeave = () => {
+    this.props.dashboard.setPanelFocus(0);
+  };
+
   renderReactPanel() {
     const { dashboard, panel } = this.props;
     const { plugin } = this.state;
@@ -127,7 +135,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
     // I want to try to keep markup (parents) for panel the same in edit mode to avoide unmount / new mount of panel
     return (
       <div className={containerClass}>
-        <div className={panelWrapperClass}>
+        <div className={panelWrapperClass} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
           <PanelChrome component={plugin.exports.Panel} panel={panel} dashboard={dashboard} />
         </div>
         {panel.isEditing && (
@@ -156,6 +164,13 @@ export class DashboardPanel extends PureComponent<Props, State> {
     }
 
     // legacy angular rendering
-    return <div ref={element => (this.element = element)} className="panel-height-helper" />;
+    return (
+      <div
+        ref={element => (this.element = element)}
+        className="panel-height-helper"
+        onMouseEnter={this.onMouseEnter}
+        onMouseLeave={this.onMouseLeave}
+      />
+    );
   }
 }
diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts
index 561663d36d5..2dcdd22e97e 100644
--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
@@ -80,16 +80,6 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
       let lastAlertState;
       let hasAlertRule;
 
-      function mouseEnter() {
-        panelContainer.toggleClass('panel-hover-highlight', true);
-        ctrl.dashboard.setPanelFocus(ctrl.panel.id);
-      }
-
-      function mouseLeave() {
-        panelContainer.toggleClass('panel-hover-highlight', false);
-        ctrl.dashboard.setPanelFocus(0);
-      }
-
       function resizeScrollableContent() {
         if (panelScrollbar) {
           panelScrollbar.update();
@@ -212,9 +202,6 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
         scope.$apply(ctrl.openInspector.bind(ctrl));
       });
 
-      elem.on('mouseenter', mouseEnter);
-      elem.on('mouseleave', mouseLeave);
-
       scope.$on('$destroy', () => {
         elem.off();
         cornerInfoElem.off();