Add customOnKeyDown prop

README.md

@@ -196,6 +196,26 @@ By default, the menu will close when the Escape key is pressed. To disable this
 <Menu disableCloseOnEsc />
 ```
 
+#### Custom `window.onkeydown` handler
+
+For more control over global keypress functionality, you can override the handler that this component sets for `window.onkeydown`, and pass a custom function. This could be useful if you are using multiple instances of this component, for example, and want to implement functionality to ensure that a single press of the Escape key closes them all.
+
+``` javascript
+const closeAllMenusOnEsc = (e) => {
+  e = e || window.event;
+
+  if (e.key === 'Escape' || e.keyCode === 27) {
+    this.setState({areMenusOpen: false});
+  }
+};
+
+// Because we can only set one window.onkeydown handler, the last menu you include will override any handlers set by previous ones.
+// For that reason, it's recommended that you pass the same function to all menus to avoid unexpected behavior.
+<MenuOne customOnKeyDown={closeAllMenusOnEsc} isOpen={areMenusOpen} />
+<MenuTwo customOnKeyDown={closeAllMenusOnEsc} isOpen={areMenusOpen} />
+```
+*Note: Using this prop will disable all the default 'close on Escape' functionality, so you will need to handle this (including determining which key was pressed) yourself.*
+
 #### Overlay
 
 You can turn off the default overlay with `noOverlay`.

lib/menuFactory.js

@@ -194,8 +194,10 @@ exports['default'] = function (styles) {
     }, {
       key: 'componentDidMount',
       value: function componentDidMount() {
-        // Bind ESC key handler (unless disabled)
-        if (!this.props.disableCloseOnEsc) {
+        // Bind ESC key handler (unless disabled or custom function supplied).
+        if (this.props.customOnKeyDown) {
+          window.onkeydown = this.props.customOnKeyDown;
+        } else if (!this.props.disableCloseOnEsc) {
           window.onkeydown = this.listenForClose.bind(this);
         }
 
@@ -344,6 +346,7 @@ exports['default'] = function (styles) {
     crossClassName: _propTypes2['default'].string,
     customBurgerIcon: _propTypes2['default'].oneOfType([_propTypes2['default'].element, _propTypes2['default'].oneOf([false])]),
     customCrossIcon: _propTypes2['default'].oneOfType([_propTypes2['default'].element, _propTypes2['default'].oneOf([false])]),
+    customOnKeyDown: _propTypes2['default'].func,
     disableCloseOnEsc: _propTypes2['default'].bool,
     disableOverlayClick: _propTypes2['default'].oneOfType([_propTypes2['default'].bool, _propTypes2['default'].func]),
     id: _propTypes2['default'].string,

src/menuFactory.js

@@ -151,8 +151,10 @@ export default styles => {
     }
 
     componentDidMount() {
-      // Bind ESC key handler (unless disabled)
-      if (!this.props.disableCloseOnEsc) {
+      // Bind ESC key handler (unless disabled or custom function supplied).
+      if (this.props.customOnKeyDown) {
+        window.onkeydown = this.props.customOnKeyDown;
+      } else if (!this.props.disableCloseOnEsc) {
         window.onkeydown = this.listenForClose.bind(this);
       }
 
@@ -291,6 +293,7 @@ export default styles => {
       PropTypes.element,
       PropTypes.oneOf([false])
     ]),
+    customOnKeyDown: PropTypes.func,
     disableCloseOnEsc: PropTypes.bool,
     disableOverlayClick: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     id: PropTypes.string,

test/menuFactory.spec.js

@@ -507,7 +507,7 @@ describe('menuFactory', () => {
     });
   });
 
-  describe('disableCloseOnEsc', () => {
+  describe('disableCloseOnEsc prop', () => {
 
     it('should not allow close on Escape key press', () => {
       Menu = menuFactory(mockStyles.basic);
@@ -518,6 +518,20 @@ describe('menuFactory', () => {
     });
   });
 
+  describe('customOnKeyDown prop', () => {
+
+    it('should be set for window.onkeydown instead of listenForClose', () => {
+      Menu = menuFactory(mockStyles.basic);
+      const customOnKeyDown = sinon.spy();
+      component = TestUtils.renderIntoDocument(<Menu customOnKeyDown={customOnKeyDown} />);
+      const listenForClose = sinon.spy(component, 'listenForClose');
+      component.setState({ isOpen: true });
+      window.onkeydown();
+      expect(customOnKeyDown.called).to.be.true;
+      expect(listenForClose.called).to.be.false;
+    });
+  });
+
   describe('open state', () => {
 
     let container;