From 239b702040f314d4dcb8c6898432531486a85364 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Mon, 24 Jul 2017 14:35:27 +0200
Subject: [PATCH] Implemented key bindings in the mode menu

---
 src/components/menu/Menu.js       |  1 -
 src/components/menu/ModeButton.js |  4 +--
 src/components/menu/ModeMenu.js   | 47 +++++++++++++++++++++++++++++--
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/components/menu/Menu.js b/src/components/menu/Menu.js
index 226beec..7456e4f 100644
--- a/src/components/menu/Menu.js
+++ b/src/components/menu/Menu.js
@@ -212,7 +212,6 @@ export default class Menu extends Component {
     }
   }
 
-  // TODO: implement the same in ModeMenu
   handleKeyDown = (event) => {
     const combo = keyComboFromEvent (event)
     if (combo === 'Up') {
diff --git a/src/components/menu/ModeButton.js b/src/components/menu/ModeButton.js
index c02a8a7..b437860 100644
--- a/src/components/menu/ModeButton.js
+++ b/src/components/menu/ModeButton.js
@@ -12,9 +12,7 @@ export default class ModeButton extends Component {
   }
 
   /**
-   * @param {{modes: string[], mode: string, onChangeMode: function, onError: function}} props
-   * @param state
-   * @return {*}
+   * props {{modes: string[], mode: string, onChangeMode: function, onError: function}}
    */
   render () {
     const { props, state} = this
diff --git a/src/components/menu/ModeMenu.js b/src/components/menu/ModeMenu.js
index 106ab1a..0c66c7e 100644
--- a/src/components/menu/ModeMenu.js
+++ b/src/components/menu/ModeMenu.js
@@ -1,5 +1,9 @@
 import { createElement as h, Component } from 'react'
 import { toCapital } from '../../utils/stringUtils'
+import { keyComboFromEvent } from '../../utils/keyBindings'
+
+const MENU_CLASS_NAME = 'jsoneditor-actionmenu'
+const MODE_MENU_CLASS_NAME = MENU_CLASS_NAME + ' jsoneditor-modemenu'
 
 export default class ModeMenu extends Component {
   /**
@@ -26,7 +30,9 @@ export default class ModeMenu extends Component {
       })
 
       return h('div', {
-        className: 'jsoneditor-actionmenu jsoneditor-modemenu'
+        className: MODE_MENU_CLASS_NAME,
+        ref: 'menu',
+        onKeyDown: this.handleKeyDown
       }, items)
     }
     else {
@@ -36,10 +42,18 @@ export default class ModeMenu extends Component {
 
   componentDidMount () {
     this.updateRequestCloseListener()
+
+    if (this.props.open) {
+      this.focusToFirstEntry ()
+    }
   }
 
-  componentDidUpdate () {
+  componentDidUpdate (prevProps) {
     this.updateRequestCloseListener()
+
+    if (this.props.open && !prevProps.open) {
+      this.focusToFirstEntry ()
+    }
   }
 
   componentWillUnmount () {
@@ -76,5 +90,34 @@ export default class ModeMenu extends Component {
     }
   }
 
+  focusToFirstEntry () {
+    if (this.refs.menu) {
+      const firstButton = this.refs.menu.querySelector('button')
+      if (firstButton) {
+        firstButton.focus()
+      }
+    }
+  }
+
+  handleKeyDown = (event) => {
+    const combo = keyComboFromEvent (event)
+
+    if (combo === 'Up') {
+      event.preventDefault()
+
+      if (event.target.previousSibling) {
+        event.target.previousSibling.focus()
+      }
+    }
+
+    if (combo === 'Down') {
+      event.preventDefault()
+
+      if (event.target.nextSibling) {
+        event.target.nextSibling.focus()
+      }
+    }
+  }
+
   handleRequestClose = null
 }
\ No newline at end of file