message: fix(masthead): fix toggle states based on blur
diff: @@ -70,6 +70,8 @@ class HeaderMenu extends React.Component {
  selectedIndex: null,
  };
  this.items = [];
  + this.setIgnoreBlur = this.setIgnoreBlur.bind(this);
  + this.clearIgnoreBlur = this.clearIgnoreBlur.bind(this);
  }
  /**
  @@ -105,9 +107,21 @@ class HeaderMenu extends React.Component {
  */
  handleOnBlur = event => {
  // Always close current expanded menu onBlur
  + if (this.ignoreBlur) return;
  this.setState({ expanded: false, selectedIndex: null });
  };
  + /**
  + * Sets and clears blur status to prevent menu from collapsing when losing
  + * focus by clicking a subnav item
  + */
  + setIgnoreBlur = () => {
  + this.ignoreBlur = true;
  + };
  + clearIgnoreBlur = () => {
  + this.ignoreBlur = false;
  + };
  +
  /**
  * ref handler for our menu button. This node is represented by the
  * `role="menu"` attribute. If we are supplied a `focusRef` prop, we also
  @@ -213,6 +227,8 @@ class HeaderMenu extends React.Component {
  return React.cloneElement(item, {
  ref: this.handleItemRef(index),
  role: 'none',
  + onMouseOver: this.setIgnoreBlur.bind(this),
  + onMouseOut: this.clearIgnoreBlur.bind(this),
  });
  };
  }
  