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 = React.memo( - ({ x, y, onClose, renderMenuItems, renderHeader }) => { + ({ x, y, onClose, focusOnOpen = true, renderMenuItems, renderHeader }) => { const menuRef = useRef(null); const [positionStyles, setPositionStyles] = useState({}); @@ -46,7 +48,9 @@ export const ContextMenu: React.FC = 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 }) => 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 = ({ children, renderMenuItems }) => { +export const WithContextMenu: React.FC = ({ 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 = ({ children, rend x={menuPosition.x} y={menuPosition.y} renderMenuItems={renderMenuItems} + focusOnOpen={focusOnOpen} /> )}