From 1d0e74f9988ef4dac3018b482d1062c7d2c50f34 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 11 Apr 2023 09:08:46 +0100
Subject: [PATCH] PanelHeaderMenuTrigger: Store `clickCoordinates` in a ref
 instead of state (#65601)

rewrite panelheadermenutrigger to use ref instead of state
---
 .../PanelHeader/PanelHeaderMenuTrigger.tsx      | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx
index 7b9bb06df6d..6d12cb3d1f5 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, MouseEvent, ReactElement, useCallback, useState } from 'react';
+import React, { HTMLAttributes, MouseEvent, ReactElement, useCallback, useRef, useState } from 'react';
 
 import { CartesianCoords2D } from '@grafana/data';
 
@@ -12,26 +12,23 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 }
 
 export function PanelHeaderMenuTrigger({ children, ...divProps }: Props) {
-  const [clickCoordinates, setClickCoordinates] = useState<CartesianCoords2D>({ x: 0, y: 0 });
+  const clickCoordinates = useRef<CartesianCoords2D>({ x: 0, y: 0 });
   const [panelMenuOpen, setPanelMenuOpen] = useState<boolean>(false);
 
   const onMenuToggle = useCallback(
     (event: MouseEvent<HTMLDivElement>) => {
-      if (!isClick(clickCoordinates, eventToClickCoordinates(event))) {
+      if (!isClick(clickCoordinates.current, eventToClickCoordinates(event))) {
         return;
       }
 
       setPanelMenuOpen(!panelMenuOpen);
     },
-    [clickCoordinates, panelMenuOpen, setPanelMenuOpen]
+    [panelMenuOpen, setPanelMenuOpen]
   );
 
-  const onMouseDown = useCallback(
-    (event: MouseEvent<HTMLDivElement>) => {
-      setClickCoordinates(eventToClickCoordinates(event));
-    },
-    [setClickCoordinates]
-  );
+  const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) => {
+    clickCoordinates.current = eventToClickCoordinates(event);
+  }, []);
 
   return (
     <header {...divProps} className="panel-title-container" onClick={onMenuToggle} onMouseDown={onMouseDown}>