title: React-Bootstrap Dropdown with Input won't stay open
body: <p>I am using <a href="https://react-bootstrap.github.io/components.html#btn-dropdowns-props-dropdown" rel="noreferrer">React-Bootstrap DropDown</a> with an <a href="https://react-bootstrap.github.io/components.html#input" rel="noreferrer">Input</a> inside a <a href="https://react-bootstrap.github.io/components.html#menu-item" rel="noreferrer">MenuItem</a> (otherwise the console yells at me <strong>Uncaught TypeError: Cannot read property 'focus' of undefined</strong>)</p>
  
  <p>Okay so the drop down renders, and the input is inside a menu item (all is well) except <strong><em>when I click inside the input, the dropdown closes.</em></strong></p>
  
  <p>Here is my JSX</p>
  
  <pre><code>&lt;Bootstrap.DropdownButton title={this.state.callIdTitle} id="callId"&gt;
    &lt;Bootstrap.MenuItem eventKey='1'&gt;
     &lt;input ref="callIdInput" type='text' eventKey='2' placeholder='Enter Call ID' /&gt;
    &lt;/Bootstrap.MenuItem&gt;
  &lt;/Bootstrap.DropdownButton&gt;
  </code></pre>
  
  <p>Any pointing in the right direction is very much appreciated, I have been trying to solve this all day.</p>
  
  <p>Thank you.</p>