From fa95b417153b5d05b087f9287aca8dbb7244c10e Mon Sep 17 00:00:00 2001 From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com> Date: Fri, 10 May 2024 14:07:12 +0200 Subject: [PATCH] TimeSeries: Improve keyboard focus and fix spacebar override (#86848) * Make GrpahNG focusable * Move to VizLayout instead * Update uPlot plugins for better keyboard support * Remove unrelated changes * different fix --------- Co-authored-by: Leon Sorokin --- .../src/components/uPlot/plugins/KeyboardPlugin.tsx | 4 +++- .../src/components/uPlot/plugins/TooltipPlugin2.tsx | 7 ++++++- 2 files changed, 9 insertions(+), 2 deletions(-) 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( {