bugfix: stops propagation on Escape key (#24810)

microsoft · Sep 20, 2022 · 81de40f · 81de40f
1 parent 24a69d6
commit 81de40f
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 6 deletions.
diff --git a/change/@fluentui-react-dialog-4c5ea8d4-22d0-4d9e-a2b6-c4730f2760c7.json 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": "[email protected]",
+  "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
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: stops propagation on Escape key",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git 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', () => {
           </DialogBody>
           <DialogActions>
             <DialogTrigger>
-              <Button id={dialogTriggerCloseId} appearance="secondary">
-                Close
-              </Button>
+              <Tooltip hideDelay={0} showDelay={0} content="Test tooltip" relationship="label">
+                <Button id={dialogTriggerCloseId} appearance="secondary">
+                  Close
+                </Button>
+              </Tooltip>
             </DialogTrigger>
             <Button appearance="primary">Do Something</Button>
           </DialogActions>
         </DialogSurface>
       </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
@@ -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
@@ -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]);