title: How have toggle dropdown on button click and close on outside click?
body: <p>I have Dropdown which is open by clicking on button and closed on outside click. </p>
  
  <p>This is function which toggle dropdown:</p>
  
  <pre><code>toggleAllCategories = () =&gt; {
    this.setState({ isOpenAllCategories: !this.state.isOpenAllCategories });
  };
  </code></pre>
  
  <p>That mean by clicking on button you should open and close Dropdown.</p>
  
  <p>But in same time I have implemented with <code>react-refs</code> that click outside of body of dropdown ---> close dropdown. </p>
  
  <p>That make bug - reproduction: </p>
  
  <p><strong>Step 1</strong>: Click on "All Categories" btn</p>
  
  <p>Result: Dropdown is open</p>
  
  <p><strong>Step 2</strong>: Click again on "All Categories" btn - cus want to close dropdown</p>
  
  <p>Result: As result Dropdown is open. </p>
  
  <ol>
  <li>Clicked on "All categories" btn (state is changed isOpenAllCategories = true)</li>
  </ol>
  
  <p>HERE is the problem --> 2. Click Again on "All Categories" btn </p>
  
  <ul>
  <li><p>First is called <code>handleOutsideClick()</code> function which sets <code>isOpenAllCategories on false</code>. </p></li>
  <li><p>Then is called <code>toggleAllCategories()</code> which change state on oposite of current value <code>isOpenAllCategories: !this.state.isOpenAllCategories</code> and that is <code>true</code> cus <code>handleOutsideClick()</code> already change state on <code>false</code>.</p></li>
  </ul>
  
  <p>How have toggle dropdown on button click and close on outside click?</p>
  
  <p>All Categories Dropdown component:</p>
  
  <pre><code>class AllCategories extends Component {
  
    componentDidMount() {
      document.addEventListener('mousedown', (e) =&gt; this.handleClickOutside(e));
    }
  
    componentWillUnmount() {
      document.removeEventListener('mousedown', (e) =&gt; this.handleClickOutside(e));
    }
  
    setWrapperRef(node) {
      this.wrapperRef = node;
    }
  
    handleClickOutside = (event) =&gt; {
      if (this.wrapperRef &amp;&amp; !this.wrapperRef.contains(event.target)) {
        this.props.closeAllCategories();
      }
    };
  
    render() {
      return (
        &lt;div className="all-categories-wrapper"&gt;
          &lt;div className="all-categories" ref={(node) =&gt; this.setWrapperRef(node)}&gt;
            &lt;ul className="all-categories-list"&gt;
              &lt;li className="all-categories-list-item"&gt;All Categories&lt;/li&gt;
              {this.state.allCategories.map((category) =&gt; (
                &lt;li
                  className={`all-categories-list-item ${
                    category.selected ? 'all-categories-list-item-active' : ''
                  }`}
                &gt;
                  {category.name}
                &lt;/li&gt;
              ))}
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>All Categories Button component:</p>
  
  <pre><code>export default ({ toggleAllCategories, className }) =&gt; (
    &lt;div className="category" onClick={() =&gt; toggleAllCategories()} role="button"&gt;
      &lt;div className={`category-button-wrapper ${className}`}&gt;
        &lt;button className="category-button"&gt;
          Sports &lt;span className="category-button-slash"&gt;/&lt;/span&gt; Football
        &lt;/button&gt;
        &lt;div className="category-icon-box"&gt;
          &lt;span className="category-icon"&gt;
            &lt;i className="material-icons md-30 md-white"&gt;expand_more&lt;/i&gt;
          &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  </code></pre>