title: onMouseDown event in react does not trigger state changes but onClick does
body: <p>JSX part looks like this: </p>
  
  <pre><code>&lt;span className="header_srh_i_c" onMouseDown={this.toggleSearchbar}&gt;
      &lt;i className="fa fa-search"
          id="searchButton"
          name="searchButton"
       /&gt;
   &lt;/span&gt;
  </code></pre>
  
  <p>function in the same component looks like this:</p>
  
  <pre><code>toggleSearchbar(event){
      const eventType = event.type;
      if(this.state.showSearch &amp;&amp; this.props.q &amp;&amp; length(this.props.q) &gt; 0){
        this.toggleSearching();
      }else{
        console.log("state after", this.state.showSearch)  //false
  
        this.setState({showSearch:!this.state.showSearch},function (event) {
        console.log("state after", this.state.showSearch) //false
        })
      }
    }
  </code></pre>
  
  <p>state remains <code>false</code> event after execution of </p>
  
  <pre><code>this.setState({showSearch:!this.state.showSearch},function (event) {
            console.log("state after", this.state.showSearch) //false
            })
  </code></pre>
  
  <p>However, it works just fine if I use <code>onClick</code> instead of <code>onMouseDown</code></p>