Allow ESC to propagate if EuiPopover is not open

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Added TS defs for `EuiComboBox`'s props spreading onto a `div` ([#2080](https://github.com/elastic/eui/pull/2080))
 - Fixed responsive display of inline `EuiDatePicker` ([#1820](https://github.com/elastic/eui/pull/1820))
 - Removed time from default `dateFormat` of `EuiDatePicker` ([#1820](https://github.com/elastic/eui/pull/1820))
+- Fixed `EuiPopover` from catching and preventing propagation of keydown events when closed ([#2089](https://github.com/elastic/eui/pull/2089))
 
 ## [`12.2.0`](https://github.com/elastic/eui/tree/v12.2.0)
 

src/components/color_picker/color_picker.test.js

@@ -3,7 +3,7 @@ import { render, mount } from 'enzyme';
 
 import { EuiColorPicker } from './color_picker';
 import { VISUALIZATION_COLORS, keyCodes } from '../../services';
-import { requiredProps, findTestSubject } from '../../test';
+import { requiredProps, findTestSubject, sleep } from '../../test';
 
 jest.mock('../portal', () => ({
   EuiPortal: ({ children }) => children,
@@ -117,7 +117,7 @@ test('popover color selector is shown when the input is clicked', () => {
   expect(colorSelector.length).toBe(1);
 });
 
-test('popover color selector is hidden when the ESC key pressed', () => {
+test('popover color selector is hidden when the ESC key pressed', async () => {
   const onBlurHandler = jest.fn();
   const colorPicker = mount(
     <EuiColorPicker
@@ -129,6 +129,7 @@ test('popover color selector is hidden when the ESC key pressed', () => {
   );
 
   findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
+  await sleep();
   findTestSubject(colorPicker, 'colorPickerPopover').simulate('keydown', {
     keyCode: keyCodes.ESCAPE,
   });

src/components/date_picker/super_date_picker/async_interval.test.js

@@ -1,5 +1,6 @@
 import { AsyncInterval } from './async_interval';
 import { times } from 'lodash';
+import { sleep } from '../../../test';
 
 describe('AsyncInterval', () => {
   beforeEach(() => {
@@ -67,7 +68,6 @@ describe('AsyncInterval', () => {
     let instance;
     let spy;
     beforeEach(() => {
-      const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
       spy = jest.fn(async () => await sleep(2000));
       instance = new AsyncInterval(spy, 1000);
     });

src/components/observer/mutation_observer/mutation_observer.test.tsx

@@ -1,12 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { mount } from 'enzyme';
 import { EuiMutationObserver } from './mutation_observer';
-
-async function sleep(duration: number) {
-  return new Promise(resolve => {
-    setTimeout(resolve, duration);
-  });
-}
+import { sleep } from '../../../test';
 
 export async function waitforMutationObserver(period = 30) {
   // `period` defaults to 30 because its the delay used by the MutationObserver polyfill

src/components/observer/resize_observer/resize_observer.test.tsx

@@ -1,12 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { mount } from 'enzyme';
 import { EuiResizeObserver } from './resize_observer';
-
-async function sleep(duration: number) {
-  return new Promise(resolve => {
-    setTimeout(resolve, duration);
-  });
-}
+import { sleep } from '../../../test';
 
 export async function waitforResizeObserver(period = 30) {
   // `period` defaults to 30 because its the delay used by the ResizeObserver polyfill

src/components/popover/__snapshots__/popover.test.js.snap

@@ -44,7 +44,7 @@ exports[`EuiPopover props anchorClassName is rendered 1`] = `
 exports[`EuiPopover props anchorPosition defaults to centerDown 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
-  id="5"
+  id="6"
 >
   <div
     class="euiPopover__anchor"
@@ -57,7 +57,7 @@ exports[`EuiPopover props anchorPosition defaults to centerDown 1`] = `
 exports[`EuiPopover props anchorPosition downRight is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownRight"
-  id="7"
+  id="8"
 >
   <div
     class="euiPopover__anchor"
@@ -70,7 +70,7 @@ exports[`EuiPopover props anchorPosition downRight is rendered 1`] = `
 exports[`EuiPopover props anchorPosition leftCenter is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorLeftCenter"
-  id="6"
+  id="7"
 >
   <div
     class="euiPopover__anchor"
@@ -83,7 +83,7 @@ exports[`EuiPopover props anchorPosition leftCenter is rendered 1`] = `
 exports[`EuiPopover props isOpen defaults to false 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
-  id="8"
+  id="9"
 >
   <div
     class="euiPopover__anchor"
@@ -97,7 +97,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
 <div>
   <div
     class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
-    id="9"
+    id="10"
   >
     <div
       class="euiPopover__anchor"
@@ -144,7 +144,7 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
 <div>
   <div
     class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
-    id="10"
+    id="11"
   >
     <div
       class="euiPopover__anchor"
@@ -191,7 +191,7 @@ exports[`EuiPopover props ownFocus renders true 1`] = `
 <div>
   <div
     class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
-    id="11"
+    id="12"
   >
     <div
       class="euiPopover__anchor"
@@ -246,7 +246,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
 <div>
   <div
     class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
-    id="12"
+    id="13"
   >
     <div
       class="euiPopover__anchor"
@@ -293,7 +293,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
 <div>
   <div
     class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
-    id="13"
+    id="14"
   >
     <div
       class="euiPopover__anchor"

src/components/popover/popover.js

@@ -149,9 +149,11 @@ export class EuiPopover extends Component {
 
   onKeyDown = e => {
     if (e.keyCode === cascadingMenuKeyCodes.ESCAPE) {
-      e.preventDefault();
-      e.stopPropagation();
-      this.props.closePopover();
+      if (this.state.isOpenStable || this.state.isOpening) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.props.closePopover();
+      }
     }
   };
 

src/components/popover/popover.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
-import sinon from 'sinon';
 import { requiredProps } from '../../test/required_props';
 
 import {
@@ -74,20 +73,38 @@ describe('EuiPopover', () => {
     });
 
     describe('closePopover', () => {
-      it('is called when ESC key is hit', () => {
-        const closePopoverHandler = sinon.stub();
+      it('is called when ESC key is hit and the popover is open', () => {
+        const closePopoverHandler = jest.fn();
 
         const component = mount(
           <EuiPopover
             id={getId()}
             withTitle
             button={<button />}
             closePopover={closePopoverHandler}
+            isOpen
           />
         );
 
         component.simulate('keydown', { keyCode: keyCodes.ESCAPE });
-        sinon.assert.calledOnce(closePopoverHandler);
+        expect(closePopoverHandler).toBeCalledTimes(1);
+      });
+
+      it('is not called when ESC key is hit and the popover is closed', () => {
+        const closePopoverHandler = jest.fn();
+
+        const component = mount(
+          <EuiPopover
+            id={getId()}
+            withTitle
+            button={<button />}
+            closePopover={closePopoverHandler}
+            isOpen={false}
+          />
+        );
+
+        component.simulate('keydown', { keyCode: keyCodes.ESCAPE });
+        expect(closePopoverHandler).not.toBeCalled();
       });
     });
 

src/test/index.ts

@@ -5,3 +5,4 @@ export {
   startThrowingReactWarnings,
   stopThrowingReactWarnings,
 } from './react_warnings';
+export { sleep } from './sleep';

src/test/sleep.ts

@@ -0,0 +1,6 @@
+// async timeout function for awaiting state or DOM updates
+export function sleep(ms: number = 50) {
+  return new Promise(resolve => {
+    setTimeout(resolve, ms);
+  });
+}