title: React Bootstrap Dropdown Menu closes when clicking on an input
body: <p>I have been bumping my head against this question for a while now. I realize it has been asked before on SO, but none of the questions I saw were exactly the same (either they were not relevant to React or had an answer that wasn't working).</p>
  
  <p>My problem is that I have a dropdown menu made with React-Bootstrap with a nested text input. When I click on the input, the menu automatically closes.</p>
  
  <p>I have tried, according to some answers, to stopPropagation of the event, but when I do this, I cannot write anything on the input field. Furthermore, neither stopImmediatePropagation nor preventDefault work at all.</p>
  
  <p>Here is my dropdown as it renders inside the component:</p>
  
  <pre><code>    &lt;ButtonGroup&gt;
        &lt;DropdownButton className="filter-ddown1" id="filter-ddown1" title="Rango de Precio"&gt;
          &lt;MenuItem className="itemxx" href="#"&gt;&lt;input className="minmax" onClick={this.dontClose} type="text" placeholder="Min" value={this.props.state.minPrice}&gt;&lt;/input&gt;&lt;label&gt; - &lt;/label&gt;&lt;input className="minmax" type="text" placeholder="Max" value={this.props.state.maxPrice}&gt;&lt;/input&gt;&lt;/MenuItem&gt;
        &lt;/DropdownButton&gt;
      &lt;/ButtonGroup&gt;
  </code></pre>
  
  <p>And here is the dontClose function (which avoids writing anything on the input field):</p>
  
  <pre><code>  dontClose:function(e){
      e.preventDefault();
      e.stopPropagation();
      e.nativeEvent.stopImmediatePropagation();
    }
  </code></pre>
  
  <p>I thank you in advance if you can help.</p>