diff --git a/packages/grafana-ui/src/components/uPlot/plugins/KeyboardPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/KeyboardPlugin.tsx index f23cded4172..2a6ce3f8484 100644 --- a/packages/grafana-ui/src/components/uPlot/plugins/KeyboardPlugin.tsx +++ b/packages/grafana-ui/src/components/uPlot/plugins/KeyboardPlugin.tsx @@ -13,7 +13,7 @@ const SHIFT_MULTIPLIER = 2 as const; const KNOWN_KEYS = new Set(['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Shift', ' ']); const initHook = (u: uPlot) => { - let parentWithFocus: HTMLElement | null = u.root.closest('[tabindex]'); + let parentWithFocus: HTMLElement | null = u.root; let pressedKeys = new Set(); let dragStartX: number | null = null; let keysLastHandledAt: number | null = null; @@ -21,6 +21,8 @@ const initHook = (u: uPlot) => { if (!parentWithFocus) { return; } + // Make Graph area focusable. Setting this in Viz* components will make focus available on panels that do not yet have keyboard support + parentWithFocus.tabIndex = 0; const moveCursor = (dx: number, dy: number) => { const { cursor } = u; diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx index daa3f42a12d..7a84afcfbd9 100644 --- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx +++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx @@ -545,7 +545,12 @@ export const TooltipPlugin2 = ({ // if not viaSync, re-dispatch real event if (event != null) { - plot!.over.dispatchEvent(event); + // this works around the fact that uPlot does not unset cursor.event (for perf reasons) + // so if the last real mouse event was mouseleave and you manually trigger u.setCursor() + // it would end up re-dispatching mouseleave + const isStaleEvent = performance.now() - event.timeStamp > 16; + + !isStaleEvent && plot!.over.dispatchEvent(event); } else { plot!.setCursor( {