diff --git a/packages/react/src/components/Tooltip/Tooltip-test.js b/packages/react/src/components/Tooltip/Tooltip-test.js index 08d2fab9615b..72ddbc00e9a9 100644 --- a/packages/react/src/components/Tooltip/Tooltip-test.js +++ b/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 */} +
+ +
+ + ); + + userEvent.click(screen.getAllByRole('button')[0]); + userEvent.keyboard('{esc}'); + + expect(onKeyDown).not.toHaveBeenCalled(); + }); }); diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js index 0ec8ba2924d5..27dc2d65613f 100644 --- a/packages/react/src/components/Tooltip/Tooltip.js +++ b/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 */}
{ + if (keyDownMatch(event, [keys.Escape])) { + event.stopPropagation(); + } + }} {...other} id={this._tooltipId} data-floating-menu-direction={storedDirection}