diff --git a/README.md b/README.md index 7e5793a0..2c291e8e 100644 --- a/README.md +++ b/README.md @@ -204,6 +204,12 @@ ReactDOM.render( corresponding to activeKey + + tabIndex + String + + the tabindex to assign to allow the user to tab to this item + @@ -244,6 +250,12 @@ ReactDOM.render( false no effect for click or keydown for this item + + tabIndex + String + + the tabindex to assign to allow the user to tab to this item + diff --git a/src/MenuItem.jsx b/src/MenuItem.jsx index 5dee9f44..9bb0f234 100644 --- a/src/MenuItem.jsx +++ b/src/MenuItem.jsx @@ -10,6 +10,7 @@ const MenuItem = React.createClass({ selected: React.PropTypes.bool, disabled: React.PropTypes.bool, title: React.PropTypes.string, + tabIndex: React.PropTypes.string, onSelect: React.PropTypes.func, onClick: React.PropTypes.func, onDeselect: React.PropTypes.func, @@ -122,6 +123,7 @@ const MenuItem = React.createClass({ ...props.attribute, title: props.title, className: classnames(classes), + tabIndex: props.tabIndex, role: 'menuitem', 'aria-selected': props.selected, 'aria-disabled': props.disabled, diff --git a/src/SubMenu.jsx b/src/SubMenu.jsx index de9847f4..b1d171f7 100644 --- a/src/SubMenu.jsx +++ b/src/SubMenu.jsx @@ -9,6 +9,7 @@ const SubMenu = React.createClass({ parentMenu: React.PropTypes.object, title: React.PropTypes.node, onClick: React.PropTypes.func, + onFocus: React.PropTypes.func, onOpenChange: React.PropTypes.func, rootPrefixCls: React.PropTypes.string, eventKey: React.PropTypes.string, @@ -21,6 +22,7 @@ const SubMenu = React.createClass({ onDeselect: React.PropTypes.func, onDestroy: React.PropTypes.func, onItemHover: React.PropTypes.func, + tabIndex: React.PropTypes.string }, mixins: [require('./SubMenuStateMixin')], @@ -163,6 +165,15 @@ const SubMenu = React.createClass({ onSubMenuClick(info) { this.props.onClick(this.addKeyPath(info)); }, + + onFocus: function onFocus () { + if (!this.props.open) { + this.triggerOpenChange(true); + } + else { + this.triggerOpenChange(false); + } + }, onSelect(info) { this.props.onSelect(info); @@ -252,12 +263,16 @@ const SubMenu = React.createClass({ classes[prefixCls] = true; classes[prefixCls + '-' + props.mode] = 1; let clickEvents = {}; + let focusEvents = {}; let mouseEvents = {}; let titleMouseEvents = {}; if (!props.disabled) { clickEvents = { onClick: this.onClick, }; + focusEvents = { + onFocus: this.onFocus, + }; mouseEvents = { onMouseLeave: this.onMouseLeave, onMouseEnter: this.onSubTreeMouseEnter, @@ -275,9 +290,11 @@ const SubMenu = React.createClass({