fix: Popover should stop propagating Escape key event on closing (#3032)

Author: bxiao

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(
+					<DemoComponent
+						onOpen={() => {
+							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');
+			});
 		});
 	});
 

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: