@@ -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/src/less/components/drop-down-menu.less b/src/less/components/drop-down-menu.less
index 03ecd1993343d4..2733aba72edd20 100644
--- a/src/less/components/drop-down-menu.less
+++ b/src/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,