title: Dropdown with input field
body: <p>I'm using <code>react-bootstrap</code> for adding <code>bootstrap</code> elements to my application. I need to add a dropdown-button that has a list of "labels" that the user can use to tag their items with.</p>
  
  <p>My problem is with adding an input field so that they can add a "custom" label. Here's how it looks currently (blue squares are checkboxes):</p>
  
  <p><a href="https://i.stack.imgur.com/i0D86.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i0D86.png" alt="enter image description here"></a></p>
  
  <p>First I tried:</p>
  
  <pre><code>&lt;Dropdown id="myDropdown"&gt;
      &lt;Dropdown.Toggle bsStyle="warning"&gt;Label as...&lt;/Dropdown.Toggle&gt;
      &lt;Dropdown.Menu&gt;
          &lt;li onSelect={...}&gt;
              &lt;Checkbox onClick={...} checked={...} inline&gt;Some label&lt;/Checkbox&gt;
          &lt;/li&gt;
          &lt;li onSelect={...}&gt;
              &lt;Checkbox onClick={...} checked={...} inline&gt;Some other label&lt;/Checkbox&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;input /&gt;&lt;/li&gt;
      &lt;/Dropdown.Menu&gt;
  &lt;/Dropdown&gt;
  </code></pre>
  
  <p>However, this closes the <code>dropdown</code> when you click on the <code>input</code> element. </p>
  
  <p>So I tried implementing a slight variation to an example shown in the official documentation (search for "<a href="https://react-bootstrap.github.io/components/dropdowns/" rel="nofollow noreferrer"><strong>Custom Dropdown Components</strong></a>" and view code). This allows me to click and type in the <code>input</code>, but now the dropdown doesn't close when I click outside the element.</p>
  
  <hr>
  
  <p><strong>TL;DR</strong></p>
  
  <p>How can I achieve a dropdown that allows me to click an <code>input</code> field that also closes when you click outside the menu?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Adding generated html for my second implementation:</p>
  
  <pre><code>&lt;div class="dropdown btn-group"&gt;
    &lt;button type="button" class="dropdown-toggle btn btn-warning"&gt;&lt;i class="fa fa-check" aria-hidden="true"&gt;&lt;/i&gt;&lt;!-- react-text: 153 --&gt; &lt;!-- /react-text --&gt;&lt;!-- react-text: 154 --&gt;Label as...&lt;!-- /react-text --&gt;&lt;!-- react-text: 155 --&gt; &lt;!-- /react-text --&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
     &lt;ul class="dropdown-menu"&gt;
       &lt;li&gt;&lt;label class="checkbox-inline"&gt;&lt;input type="checkbox" value="on"&gt;&lt;span&gt;&lt;/span&gt;&lt;!-- react-text: 162 --&gt; Some label&lt;!-- /react-text --&gt;&lt;/label&gt;&lt;/li&gt;
       &lt;li&gt;&lt;label class="checkbox-inline"&gt;&lt;input type="checkbox" value="on"&gt;&lt;span&gt;&lt;/span&gt;&lt;!-- react-text: 167 --&gt; Some other label&lt;!-- /react-text --&gt;&lt;/label&gt;&lt;/li&gt;
       &lt;li&gt;&lt;label class="checkbox-inline"&gt;&lt;input type="checkbox" value="on"&gt;&lt;span&gt;&lt;/span&gt;&lt;input type="text" value="" style="height: 17px;font-size: .9em;"&gt;&lt;/label&gt;&lt;/li&gt;
       &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
       &lt;li role="presentation" class=""&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Clear labels&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>