feat(dropdown-menu): allow esc to propagate if dropdown is closed (#1686)

* feat(dropdown-menu): allow esc to propagate if dropdown is closed

* feat(dropdown-menu): added positive test case

* feat(dropdown-menu): use key constants from constantsjs

* feat(dropdown-menu): allow esc to propagate if dropdown is closed

* feat(dropdown-menu): added positive test case

* feat(dropdown-menu): use key constants from constantsjs

Author: cweeii

src/components/dropdown-menu/DropdownMenu.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import TetherComponent from 'react-tether';
 import uniqueId from 'lodash/uniqueId';
 
+import { KEYS } from '../../constants';
 import './DropdownMenu.scss';
 
 type Props = {
@@ -107,25 +108,30 @@ class DropdownMenu extends React.Component<Props, State> {
     };
 
     handleButtonKeyDown = (event: SyntheticKeyboardEvent<>) => {
+        const { isOpen } = this.state;
+
         switch (event.key) {
-            case ' ': // Spacebar
-            case 'Enter':
-            case 'ArrowDown':
+            case KEYS.space:
+            case KEYS.enter:
+            case KEYS.arrowDown:
                 event.stopPropagation();
                 event.preventDefault();
 
                 this.openMenuAndSetFocusIndex(0);
                 break;
 
-            case 'ArrowUp':
+            case KEYS.arrowUp:
                 event.stopPropagation();
                 event.preventDefault();
 
                 this.openMenuAndSetFocusIndex(-1);
                 break;
 
-            case 'Escape':
-                event.stopPropagation();
+            case KEYS.escape:
+                if (isOpen) {
+                    event.stopPropagation();
+                }
+
                 event.preventDefault();
                 this.closeMenu();
                 break;

src/components/dropdown-menu/__tests__/DropdownMenu.test.js

@@ -3,6 +3,7 @@ import { mount, shallow } from 'enzyme';
 import sinon from 'sinon';
 
 import DropdownMenu from '../DropdownMenu';
+import { KEYS } from '../../../constants';
 
 const sandbox = sinon.sandbox.create();
 
@@ -357,13 +358,13 @@ describe('components/dropdown-menu/DropdownMenu', () => {
     describe('handleButtonKeyDown()', () => {
         [
             {
-                key: ' ',
+                key: KEYS.space,
             },
             {
-                key: 'Enter',
+                key: KEYS.enter,
             },
             {
-                key: 'ArrowDown',
+                key: KEYS.arrowDown,
             },
         ].forEach(({ key }) => {
             test('should call openMenuAndSetFocus(0) when an open keystroke is pressed', () => {
@@ -388,6 +389,28 @@ describe('components/dropdown-menu/DropdownMenu', () => {
             });
         });
 
+        test('shoud not stop esc propagation if dropdown is closed', () => {
+            const wrapper = getWrapper();
+            wrapper.setState({ isOpen: false });
+
+            wrapper.find(FakeButton).simulate('keydown', {
+                key: KEYS.escape,
+                preventDefault: sandbox.mock(),
+                stopPropagation: sandbox.mock().never(),
+            });
+        });
+
+        test('should stop esc propagation if dropdown is open', () => {
+            const wrapper = getWrapper();
+            wrapper.setState({ isOpen: true });
+
+            wrapper.find(FakeButton).simulate('keydown', {
+                key: KEYS.escape,
+                preventDefault: sandbox.mock(),
+                stopPropagation: sandbox.mock(),
+            });
+        });
+
         test('should call openMenuAndSetFocus(-1) to last item when "up" is pressed', () => {
             const wrapper = shallow(
                 <DropdownMenu>