title: Typeahead.js interferes with Bootstrap input groups
body: <p>How do I keep Typeahead.js from splitting up my Twitter Bootstrap 3 input groups? Whenever I point the Typeahead javascript at a text area that's part of an input group, the joined text area and submit button stop being joined. Is this something that's just a bug in Typeahead, or is there a workaround for this?</p>
  
  <p>Without loading Typeahead.JS:</p>
  
  <p><img src="https://i.stack.imgur.com/TZg0c.png" alt="enter image description here"></p>
  
  <p>With Typeahead.JS:</p>
  
  <p><img src="https://i.stack.imgur.com/xtvQ4.png" alt="enter image description here"></p>
  
  <p>My original HTML:</p>
  
  <pre><code>    &lt;div class="col-sm-4 hidden-xs"&gt;
      &lt;form class="navbar-form" role="search"&gt;
          &lt;div class="input-group"&gt;
          &lt;input type="text" id="tags" class="form-control" name="q"&gt;
              &lt;div class="input-group-btn"&gt;
                  &lt;button class="btn btn-default" type="submit"&gt;Search&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt; 
      &lt;/div&gt;
  </code></pre>
  
  <p>This is what Typeahead does to this HTML:</p>
  
  <pre><code>&lt;div class="col-sm-4 hidden-xs"&gt;
          &lt;form class="navbar-form" role="search"&gt;
              &lt;div class="input-group"&gt;
              &lt;span class="twitter-typeahead" style="position: relative; display: inline-block;"&gt;
              &lt;input type="text" class="form-control tt-hint" disabled="" autocomplete="off" spellcheck="false" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; background-position: 0% 0%; background-repeat: repeat repeat;"&gt;
              &lt;input type="text" id="tags" class="form-control tt-input" name="q" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"&gt;
              &lt;pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"&gt;
              &lt;/pre&gt;
              &lt;span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"&gt;&lt;div class="tt-dataset-0"&gt;&lt;/div&gt;
              &lt;/span&gt;
              &lt;/span&gt;
                  &lt;div class="input-group-btn"&gt;
                      &lt;button class="btn btn-default" type="submit"&gt;Search&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt; 
          &lt;/div&gt;
  </code></pre>