Typeahead.js interfiere con los grupos de entrada de Bootstrap

¿Cómo evito que Typeahead.js separe mis grupos de entrada de Twitter Bootstrap 3? Cada vez que señalo el javascript Typeahead en un área de texto que es parte de un grupo de entrada, el área de texto unida y el botón de enviar dejan de unirse. ¿Esto es solo un error en Typeahead, o hay una solución para esto?

Sin cargar Typeahead.JS:

enter image description here

Con Typeahead.JS:

enter image description here

Mi HTML original:

 

Esto es lo que Typeahead hace a este HTML:

 

    Este proyecto resolvió parcialmente el problema para mí: https://github.com/hyspace/typeahead.js-bootstrap3.less

    El único problema pendiente es cuando aplico efecto de sombra tanto para .btn como para .form-control. La sombra también se dibuja entre el campo de entrada y el botón.

    enter image description here

     .twitter-typeahead {float: left;  ancho: 100%}
    

    Esto soluciona el problema cuando el lado izquierdo del cuadro de texto es cuadrado (no redondeado):

     .input-group .twitter-typeahead .form-control:not(:first-child):not(:last-child) { border-radius: 4px 0px 0px 4px; } 

    ¿tal vez?

    .twitter-typeahead > .form-control{ width: inherit !important; }