Tooltips: Prevent dismissing with keyboard shortcuts (#115802)

This commit is contained in:
Adela Almasan
2026-01-05 08:56:21 -06:00
committed by GitHub
parent d8cdee80f0
commit 5698f2d039
3 changed files with 29 additions and 0 deletions
@@ -78,6 +78,16 @@ test.describe('Panels test: StateTimeine', { tag: ['@panels', '@state-timeline']
await dashboardPage.getByGrafanaSelector(selectors.components.Portal.container).getByLabel('Close').click();
await expect(tooltip, 'tooltip closed on "x" click').toBeHidden();
// test that CMD/CTRL+C doesn't dismiss the tooltip
await stateTimelineUplot.click({ position: { x: 100, y: 50 } });
await expect(tooltip, 'tooltip appears on click').toBeVisible();
await page.keyboard.press('Meta+C');
await expect(tooltip, 'tooltip persists after CMD/CTRL+C').toBeVisible();
// test that Escape key dismisses the tooltip
await page.keyboard.press('Escape');
await expect(tooltip, 'tooltip closed on Escape key').toBeHidden();
// disable tooltips
await dashboardPage
.getByGrafanaSelector(selectors.components.PanelEditor.OptionsPane.fieldLabel('Tooltip Tooltip mode'))
@@ -76,6 +76,16 @@ test.describe('Panels test: StatusHistory', { tag: ['@panels', '@status-history'
await dashboardPage.getByGrafanaSelector(selectors.components.Portal.container).getByLabel('Close').click();
await expect(tooltip, 'tooltip closed on "x" click').toBeHidden();
// test that CMD/CTRL+C doesn't dismiss the tooltip
await statusHistoryUplot.click({ position: { x: 100, y: 50 } });
await expect(tooltip, 'tooltip appears on click').toBeVisible();
await page.keyboard.press('Meta+C');
await expect(tooltip, 'tooltip persists after CMD/CTRL+C').toBeVisible();
// test that Escape key dismisses the tooltip
await page.keyboard.press('Escape');
await expect(tooltip, 'tooltip closed on Escape key').toBeHidden();
// disable tooltips
await dashboardPage
.getByGrafanaSelector(selectors.components.PanelEditor.OptionsPane.fieldLabel('Tooltip Tooltip mode'))
@@ -240,6 +240,15 @@ export const TooltipPlugin2 = ({
// in some ways this is similar to ClickOutsideWrapper.tsx
const downEventOutside = (e: Event) => {
if (e instanceof KeyboardEvent) {
if (e.key === 'Escape') {
e.preventDefault();
e.stopPropagation();
dismiss();
}
return;
}
// this tooltip is Portaled, but actions inside it create forms in Modals
const isModalOrPortaled = '[role="dialog"], #grafana-portal-container';