diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx index 5d5aacd78..ff8cc7b92 100644 --- a/shared/naturalcrit/nav/nav.jsx +++ b/shared/naturalcrit/nav/nav.jsx @@ -80,23 +80,29 @@ const Nav = { }, getInitialState : function() { return { - showDropdown : false + showFromClick : false, + showDropdown : false }; }, componentDidMount : function() { - if(this.props.trigger == 'click') - document.addEventListener('click', this.handleClickOutside); + document.addEventListener('click', this.handleClickOutside); }, componentWillUnmount : function() { - if(this.props.trigger == 'click') - document.removeEventListener('click', this.handleClickOutside); + document.removeEventListener('click', this.handleClickOutside); }, handleClickOutside : function(e){ // Close dropdown when clicked outside if(this.refs.dropdown && !this.refs.dropdown.contains(e.target)) { - this.handleDropdown(false); + this.handleClickInside(false); } }, + handleClickInside : function(state){ + const newState = state != undefined ? state : !this.state.showFromClick; + this.setState({ + showFromClick : newState + }); + this.handleDropdown(newState); + }, handleDropdown : function(show){ this.setState({ showDropdown : show @@ -121,8 +127,9 @@ const Nav = {
{this.handleDropdown(true);} : undefined} - onClick= {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined} - onMouseLeave={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(false);} : undefined}> + onClick= {()=>this.handleClickInside()} + onMouseLeave={this.props.trigger == 'hover' && !this.state.showFromClick ? ()=>{this.handleDropdown(false);} : undefined} + > {this.props.children[0] || this.props.children /*children is not an array when only one child*/} {this.renderDropdown(dropdownChildren)}