From c39d4d846a2cacac1dfd3edc2be1f2d978d111f1 Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Thu, 15 Sep 2022 08:53:49 +0000 Subject: [PATCH] bugfix: stops propagation on Escape key --- ...alog-4c5ea8d4-22d0-4d9e-a2b6-c4730f2760c7.json | 7 +++++++ ...ltip-cd8ed1f4-6139-4f4e-b524-3d882bce4cac.json | 7 +++++++ .../react-dialog/e2e/Dialog.e2e.tsx | 15 ++++++++++++--- .../react-components/react-tooltip/package.json | 1 + .../src/components/Tooltip/useTooltip.tsx | 14 +++++++++++--- 5 files changed, 38 insertions(+), 6 deletions(-) create mode 100644 change/@fluentui-react-dialog-4c5ea8d4-22d0-4d9e-a2b6-c4730f2760c7.json create mode 100644 change/@fluentui-react-tooltip-cd8ed1f4-6139-4f4e-b524-3d882bce4cac.json diff --git a/change/@fluentui-react-dialog-4c5ea8d4-22d0-4d9e-a2b6-c4730f2760c7.json b/change/@fluentui-react-dialog-4c5ea8d4-22d0-4d9e-a2b6-c4730f2760c7.json new file mode 100644 index 00000000000000..8c95700de02afc --- /dev/null +++ b/change/@fluentui-react-dialog-4c5ea8d4-22d0-4d9e-a2b6-c4730f2760c7.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Includes Tooltip Escape scenarios on e2e tests", + "packageName": "@fluentui/react-dialog", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-tooltip-cd8ed1f4-6139-4f4e-b524-3d882bce4cac.json b/change/@fluentui-react-tooltip-cd8ed1f4-6139-4f4e-b524-3d882bce4cac.json new file mode 100644 index 00000000000000..db73d98ec56e3d --- /dev/null +++ b/change/@fluentui-react-tooltip-cd8ed1f4-6139-4f4e-b524-3d882bce4cac.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "bugfix: stops propagation on Escape key", + "packageName": "@fluentui/react-tooltip", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-dialog/e2e/Dialog.e2e.tsx b/packages/react-components/react-dialog/e2e/Dialog.e2e.tsx index ff3d1caedc94ea..5bbb4c149132cf 100644 --- a/packages/react-components/react-dialog/e2e/Dialog.e2e.tsx +++ b/packages/react-components/react-dialog/e2e/Dialog.e2e.tsx @@ -15,6 +15,7 @@ import { Popover, PopoverSurface, PopoverTrigger, + Tooltip, } from '@fluentui/react-components'; import { dialogSurfaceSelector, @@ -215,23 +216,31 @@ describe('Dialog', () => { - + + + , ); + // Open Menu and then close it with Escape cy.get(dialogTriggerOpenSelector).realClick(); cy.get('#open-menu-btn').realClick(); cy.focused().realType('{esc}'); cy.get(dialogSurfaceSelector).should('exist'); + // Open Popover and then close it with Escape cy.get('#open-popover-btn').realClick(); cy.focused().realType('{esc}'); cy.get(dialogSurfaceSelector).should('exist'); + + // Open Tooltip, wait for the tooltip to appear and then close it with Escape + cy.get(dialogTriggerCloseSelector).focus().wait(0).realType('{esc}'); + cy.get(dialogSurfaceSelector).should('exist'); }); describe('modalType = modal', () => { it('should close with escape keydown', () => { diff --git a/packages/react-components/react-tooltip/package.json b/packages/react-components/react-tooltip/package.json index 76e590da27da42..b36a90b5656d46 100644 --- a/packages/react-components/react-tooltip/package.json +++ b/packages/react-components/react-tooltip/package.json @@ -32,6 +32,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { + "@fluentui/keyboard-keys": "^9.0.0", "@fluentui/react-portal": "^9.0.5", "@fluentui/react-positioning": "^9.2.0", "@fluentui/react-shared-contexts": "^9.0.1", diff --git a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx index 46624e01c390e6..9c6246c926e7b1 100644 --- a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx +++ b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx @@ -19,6 +19,7 @@ import { } from '@fluentui/react-utilities'; import type { TooltipProps, TooltipState, TooltipTriggerProps } from './Tooltip.types'; import { arrowHeight, tooltipBorderRadius } from './private/constants'; +import { Escape } from '@fluentui/keyboard-keys'; /** * Create the state required to render Tooltip. @@ -122,19 +123,26 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => { context.visibleTooltip = thisTooltip; const onDocumentKeyDown = (ev: KeyboardEvent) => { - if (ev.key === 'Escape' || ev.key === 'Esc') { + if (ev.key === Escape) { thisTooltip.hide(); + // stop propagation to avoid conflicting with other elements that listen for `Escape` + // e,g: Dialog, Popover, Menu + ev.stopPropagation(); } }; - targetDocument?.addEventListener('keydown', onDocumentKeyDown); + targetDocument?.addEventListener('keydown', onDocumentKeyDown, { + // As this event is added at targeted document, + // we need to capture the event to be sure keydown handling from tooltip happens first + capture: true, + }); return () => { if (context.visibleTooltip === thisTooltip) { context.visibleTooltip = undefined; } - targetDocument?.removeEventListener('keydown', onDocumentKeyDown); + targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true }); }; } }, [context, targetDocument, visible, setVisible]);