fix(tooltip): prevent escape keydown from bubbling

packages/react/src/components/Tooltip/Tooltip-test.js

@@ -6,22 +6,26 @@
  */
 
 import React, { Component } from 'react';
-import debounce from 'lodash.debounce';
+import debounce from 'lodash.debounce'; // eslint-disable-line no-unused-vars
 import FloatingMenu from '../../internal/FloatingMenu';
 import Tooltip from '../Tooltip';
 import { mount } from 'enzyme';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import {
   Information16 as Information,
   Add16 as Add,
   OverflowMenuVertical16,
 } from '@carbon/icons-react';
 import { settings } from 'carbon-components';
+import '@testing-library/jest-dom';
 
 const { prefix } = settings;
 
-jest.mock('lodash.debounce');
-
-debounce.mockImplementation((fn) => fn);
+jest.mock('lodash.debounce', () => (fn) => {
+  fn.cancel = jest.fn();
+  return fn;
+});
 
 describe('Tooltip', () => {
   // An icon component class
@@ -191,4 +195,21 @@ describe('Tooltip', () => {
       expect(rootWrapper.find('Tooltip').instance().state.open).toEqual(false);
     });
   });
+
+  it('escape key keyDown should not bubble outside the tooltip', () => {
+    const onKeyDown = jest.fn();
+    render(
+      <>
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        <div onKeyDown={onKeyDown}>
+          <Tooltip triggerText="Tooltip" />
+        </div>
+      </>
+    );
+
+    userEvent.click(screen.getAllByRole('button')[0]);
+    userEvent.keyboard('{esc}');
+
+    expect(onKeyDown).not.toHaveBeenCalled();
+  });
 });

packages/react/src/components/Tooltip/Tooltip.js

@@ -703,8 +703,16 @@ class Tooltip extends Component {
               this._tooltipEl = node;
             }}
             updateOrientation={this.updateOrientation}>
+            {/* This rule is disabled because the onKeyDown event handler is only
+             * being used to capture and prevent the event from bubbling: */}
+            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
             <div
               className={tooltipClasses}
+              onKeyDown={(event) => {
+                if (keyDownMatch(event, [keys.Escape])) {
+                  event.stopPropagation();
+                }
+              }}
               {...other}
               id={this._tooltipId}
               data-floating-menu-direction={storedDirection}