Support for input-group with input-group-addon element

[holtkamp]

Context When using TypeAhead on a search element, it would be nice to display a search icon next to the <input/> element, where this fiddle shows a few approaches on how to realize that.

Problem When using the simplest approach: an input-group with an icon wrapped in a input-group-addon, this seems to interfere with TypeAhead.

This HTML

    <div class="input-group">
        <input class="typeahead form-control" type="text" placeholder="Search...">
        <span class="input-group-addon"><i class="fa fa-search"></i></span>
    </div>

will be transformed by TypeAhead to something like:

    <div class="input-group">
        <span class="twitter-typeahead">
            <input class="typeahead form-control" type="text" placeholder="Search...">
            <div class="tt-menu">...</div>
        </span>
        <span class="input-group-addon"><i class="fa fa-search"></i></span>
    </div>

Notice that the menu that contains the suggestion becomes part of the input-group element making it:

• break the rounding of the left border of the <input/> element
• overlap the <input/> element. This makes it difficult for the user to continue its search adventure.

Would it be possible to use plain CSS to prevent the menu from overlapping?

Seems to be related to:

• https://github.com/twitter/typeahead.js/issues/847
• https://github.com/twitter/typeahead.js/issues/1049

UPDATE As suggested in this comment adding style="float: none;" to the input element seems to resolve the overlapping issue for Safari, FireFox, Chrome, Internet Explorer 11, Microsoft Edge. Have not tested Internet Explorer < 11 yet.

[bassjobsen]

due to the position: relative of the input, try:

.tt-menu.tt-open {
  top: 34px !important;
}

[holtkamp]

mm, ok, seems to work indeed.

When looking at this part of the source code, is it possible the class tt-dropdown-menu changed to tt-menu?

It seems https://github.com/bassjobsen/typeahead.js-bootstrap-css/pull/12 did not completely cover https://github.com/bassjobsen/typeahead.js-bootstrap-css/issues/11. Also see the classname here https://github.com/twitter/typeahead.js/blob/v0.11.1/src/typeahead/www.js#L14

Instead of supporting:

• tt-dropdown-menu for TypeAhead < 0.11
• tt-menu for TypeAhead >= 0.11

it might be beter to release a new version which bumps the required version of TypeAhead to >=0.11?

[bassjobsen]

yes, thanks. You're right about that. I fixed this with https://github.com/bassjobsen/typeahead.js-bootstrap-css/commit/e691715a3af04d374c9f8efe719addb4e233cf60 I also agree that the next release should support only >= -0.11

[holtkamp]

Great, thanks for the swift support.

Since this change is backwards compatible, would it justify a new release with increased patch version? 1.2.1?