diff --git a/components/popover/__tests__/popover.browser-test.jsx b/components/popover/__tests__/popover.browser-test.jsx index fb6190abfe..926ef1373c 100644 --- a/components/popover/__tests__/popover.browser-test.jsx +++ b/components/popover/__tests__/popover.browser-test.jsx @@ -238,6 +238,34 @@ describe('SLDSPopover', function () { const trigger = wrapper.find(defaultIds.trigger); trigger.simulate('click'); }); + + it('stops event propagation after closing on ESC', function (done) { + const mockEvent = { + key: 'Esc', + keyCode: 27, + which: 27, + stopPropagation: sinon.spy(), + }; + wrapper = mount( + { + wrapper.update(); + const popover = wrapper.find(`#${defaultIds.popover}`); + popover.simulate('keyDown', mockEvent); + }} + onKeyDown={() => { + setTimeout(() => { + expect(mockEvent.stopPropagation.callCount).to.equal(1); + done(); + }, 0); + }} + />, + { attachTo: mountNode } + ); + + const trigger = wrapper.find(defaultIds.trigger); + trigger.simulate('click'); + }); }); }); diff --git a/utilities/keyboard-navigable-dialog.js b/utilities/keyboard-navigable-dialog.js index 47fc4d84e9..be4b471fc6 100644 --- a/utilities/keyboard-navigable-dialog.js +++ b/utilities/keyboard-navigable-dialog.js @@ -22,6 +22,7 @@ import ReactDOM from 'react-dom'; // ### Event Helpers import KEYS from './key-code'; +import EventUtil from './event'; /* eslint-disable react/no-find-dom-node */ @@ -33,6 +34,7 @@ const internalHandleClick = ({ trigger, eventTarget, handleClick }) => { }; const KeyboardNavigableDialog = ({ + event, isOpen, handleClick, keyCode, @@ -44,6 +46,7 @@ const KeyboardNavigableDialog = ({ case KEYS.ESCAPE: if (isOpen) { toggleOpen(); + EventUtil.trapEvent(event); } break; case KEYS.ENTER: