'use strict';

var React = require('react');

var MenuControl = require('mixin/MenuControl');

var NavMenu = React.createClass({
  mixins : [
    require('mixin/MenuControl')
  ],

  propTypes : {
    text : React.PropTypes.string.isRequired,
    icon : React.PropTypes.string
  },

  render : function () {
    var display = !!this.props.icon ?
      (<span><i className={'fa fa-lg ' + this.props.icon}></i>&ensp;{this.props.text}</span>) :
      (<span>{this.props.text}</span>);

    return (
      <a onClick={this._toggleMenu} onBlur={this._onBlur} tabIndex='-1'>
        {display}&emsp;<i className='fa fa-chevron-down'></i>
      </a>
    );
  },

  componentDidUpdate : function () {
    if (this.state.open) {
      React.findDOMNode(this).focus();
    }
  },

  _onBlur : function () {
    this.setState({ open : false });
  }

});

module.exports = NavMenu;

'use strict';

var React = require('react');

var MenuControl = require('mixin/MenuControl');

var NavMenu = React.createClass({
  mixins : [
    require('mixin/MenuControl')
  ],

  propTypes : {
    text : React.PropTypes.string.isRequired,
    icon : React.PropTypes.string
  },

  render : function () {
    var display = !!this.props.icon ?
      (<span><i className={'fa fa-lg ' + this.props.icon}></i>&ensp;{this.props.text}</span>) :
      (<span>{this.props.text}</span>);

    return (
      <a onClick={this._toggleMenu} onBlur={this._onBlur} tabIndex='-1'>
        {display}&emsp;<i className='fa fa-chevron-down'></i>
      </a>
    );
  },

});

module.exports = NavMenu;

Remove the blur handler for now
Remove the blur handler for now

Closing the menu on blur was preventing the click from actually opening
the new URL. This will work as a solution for closing menus, but will
need a little more work
