From e76fdcefbbb3cf28d4b07eb5de90797041294bf7 Mon Sep 17 00:00:00 2001
From: Andreas Koeberle <andreas.koeberle@celeraone.com>
Date: Tue, 11 Nov 2014 20:56:44 +0100
Subject: [PATCH] add key access to drop down component

---
 docs/dist/js/drop-down-menu.jsx               | 43 +++++++++++++++++--
 docs/dist/less/components/drop-down-menu.less |  1 +
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/docs/dist/js/drop-down-menu.jsx b/docs/dist/js/drop-down-menu.jsx
index 27562047d3dfeb..b60f317712b83b 100644
--- a/docs/dist/js/drop-down-menu.jsx
+++ b/docs/dist/js/drop-down-menu.jsx
@@ -46,9 +46,8 @@ var DropDownMenu = React.createClass({
     var classes = this.getClasses('mui-drop-down-menu', {
       'mui-open': this.state.open
     });
-
     return (
-      <div className={classes}>
+      <div className={classes} onFocus={this._onFocus} onBlur={this._onBlur} onKeyDown={this._onKeydown} tabIndex="0">
         <div className="mui-menu-control" onClick={this._onControlClick}>
           <Paper className="mui-menu-control-bg"zDepth={0} />
           <div className="mui-menu-label">
@@ -65,14 +64,52 @@ var DropDownMenu = React.createClass({
     this.setState({ open: !this.state.open });
   },
 
+  _onFocus: function() {
+    console.log('test');
+    this.setState({ open: true });
+  },
+
+  _onBlur: function() {
+    this.setState({ open: false });
+  },
+
+  _onKeydown: function(e) {
+
+    if (e.keyCode === 40) {
+      this.setState({
+        selectedIndex: Math.min(this.state.selectedIndex + 1, this.props.menuItems.length - 1)
+      });
+      e.preventDefault();
+    }
+    if (e.keyCode === 38) {
+      this.setState({
+        selectedIndex: Math.max(this.state.selectedIndex - 1, 0)
+      });
+      e.preventDefault();
+    }
+
+    if (e.keyCode === 13) {
+      this._triggerChange(e, this.state.selectedIndex, null);
+      this.setState({
+        open: false
+      });
+      e.preventDefault();
+    }
+  },
+
   _onMenuItemClick: function(e, key, payload) {
-    if (this.props.onChange && this.state.selectedIndex !== key) this.props.onChange(e, key, payload);
+    this._triggerChange(e, key, payload);
     this.setState({
       selectedIndex: key,
       open: false
     });
+  },
+
+  _triggerChange: function(e, key, payload) {
+    if (this.props.onChange && this.state.selectedIndex !== key) this.props.onChange(e, key, payload);
   }
 
+
 });
 
 module.exports = DropDownMenu;
diff --git a/docs/dist/less/components/drop-down-menu.less b/docs/dist/less/components/drop-down-menu.less
index 03ecd1993343d4..2733aba72edd20 100644
--- a/docs/dist/less/components/drop-down-menu.less
+++ b/docs/dist/less/components/drop-down-menu.less
@@ -5,6 +5,7 @@
   position: relative;
   height: @desktop-toolbar-height;
   font-size: @desktop-drop-down-menu-font-size;
+  outline: none;
 
   &.mui-open {
     .mui-menu-control,