From 1bdbc3abdf0993b1ee22de954b2db7dcd5845480 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Wed, 9 Feb 2022 11:43:08 -0800
Subject: [PATCH] ContextMenu: make focus on open optional (#45170)

---
 .../grafana-ui/src/components/ContextMenu/ContextMenu.tsx | 8 ++++++--
 .../src/components/ContextMenu/WithContextMenu.tsx        | 5 ++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
index 369782f4a63..d4312d6a3db 100644
--- a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
+++ b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
@@ -11,6 +11,8 @@ export interface ContextMenuProps {
   y: number;
   /** Callback for closing the menu */
   onClose?: () => void;
+  /** On menu open focus the first element */
+  focusOnOpen?: boolean;
   /** RenderProp function that returns menu items to display */
   renderMenuItems?: () => React.ReactNode;
   /** A function that returns header element */
@@ -18,7 +20,7 @@ export interface ContextMenuProps {
 }
 
 export const ContextMenu: React.FC<ContextMenuProps> = React.memo(
-  ({ x, y, onClose, renderMenuItems, renderHeader }) => {
+  ({ x, y, onClose, focusOnOpen = true, renderMenuItems, renderHeader }) => {
     const menuRef = useRef<HTMLDivElement>(null);
     const [positionStyles, setPositionStyles] = useState({});
 
@@ -46,7 +48,9 @@ export const ContextMenu: React.FC<ContextMenuProps> = React.memo(
     const header = renderHeader?.();
     const menuItems = renderMenuItems?.();
     const onOpen = (setFocusedItem: (a: number) => void) => {
-      setFocusedItem(0);
+      if (focusOnOpen) {
+        setFocusedItem(0);
+      }
     };
     const onKeyDown = (e: React.KeyboardEvent) => {
       if (e.key === 'Escape') {
diff --git a/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx b/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx
index f7c69446d0b..92c862c8c77 100644
--- a/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx
+++ b/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx
@@ -6,9 +6,11 @@ interface WithContextMenuProps {
   children: (props: { openMenu: React.MouseEventHandler<HTMLElement> }) => JSX.Element;
   /** A function that returns an array of menu items */
   renderMenuItems: () => React.ReactNode;
+  /** On menu open focus the first element */
+  focusOnOpen?: boolean;
 }
 
-export const WithContextMenu: React.FC<WithContextMenuProps> = ({ children, renderMenuItems }) => {
+export const WithContextMenu: React.FC<WithContextMenuProps> = ({ children, renderMenuItems, focusOnOpen = true }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
   return (
@@ -29,6 +31,7 @@ export const WithContextMenu: React.FC<WithContextMenuProps> = ({ children, rend
           x={menuPosition.x}
           y={menuPosition.y}
           renderMenuItems={renderMenuItems}
+          focusOnOpen={focusOnOpen}
         />
       )}
     </>