Dropdown doesn't hide on single page web apps

I’m using this drop down on a single page web app with the Dropdown in a global header. In the Dropdown I have links for navigation change the URL. Its a single page web app so its just changing route and the page doesn’t reload. As such, after clicking a link and having the page change the Dropdown is still in its active state which is not desirable. This is because the component never umounts/mounts.

I’ve done some experimentation and put the modified _onWindowClick as follows:

_onWindowClick: function( event ){
    const dropdown_element = findDOMNode( this );
    if( event.target !== dropdown_element && !dropdown_element.contains( event.target ) && this.isActive() ){
      this.hide();
    }

    if (dropdown_element.contains( event.target ) && event.target.tagName === 'A' && !event.target.href.endsWith('#dropdown-trigger')) {
      this.hide();
    }
  }

The additional last if is says that:

• If the event.target is contained with the Dropdown; and
• its an A tag;
• and that A tag does not have an href which ends with the trigger link itself;
• then hide the menu.

This doesn’t seem like the most elegant solution but it works.

I’m happy to submit a pull request with this or with any other suggestions you might have.

[Fauntleroy]

I’ll look into an update which should allow something like this:

const MyDropdown = React.createClass({
  render () {
    return (<Dropdown ref="dropdown">
      <DropdownTrigger>Trigger</DropdownTrigger>
      <DropdownContent onClick={()=>{this.refs.dropdown.hide()}>
        Content
      </DropdownContent>
    </Dropdown>);
  }
});

[mjoyce91]

I was getting a react/no-string-refs lint error, but took a look at this documentation about Refs and the DOM and was able to get something working:

export class AccountDropdown extends Component {
constructor(props) {
    super(props);
    this.hideDropdown = this.hideDropdown.bind(this);
  }
hideDropdown() {
    // Explicitly hide the dropdown using the built-in hide() function from react-simple-dropdown
    this.dropdown.hide();
  }
render() {
    return (
      <Dropdown className="account-dropdown" ref={(dropdown) => { this.dropdown = dropdown; }} >
        <DropdownTrigger href="/#">
        </DropdownTrigger>
        <DropdownContent>
          <div className="account-dropdown--identity account-dropdown--segment">
            <Link to="/profile" onClick={this.hideDropdown}>Profile</Link>
          </div>
        </DropdownContent>
      </Dropdown>
    );
  }
}