Make component render correctly when used with `input-group`

[atuttle]

Given:

<div className='form-group'>
    <label className='control-label col-md-3'>To</label>
    <div className='col-md-6'>
        <div className="input-group">
            <Typeahead
                onInputChange={this.setDesignation}
                options={designationList}
                defaultSelected={ [ this.props.designation ] }
            />
            <div className="input-group-btn">
                <a className='btn btn-primary btn-block' href='/giving'>Browse...</a>
            </div>
        </div>
    </div>
</div>

The result is that the dropdown for selecting a value hovers over the input (instead of below it):

This is problematic because in single-selection mode it is not immediately obvious that you need to backspace away your selection in order to see the list again, if that's what you're trying to do:

I think this problem would go away if #73 were implemented.

[ericgio]

Seems like a CSS bug, thanks for reporting.

[ericgio]

It looks like the form and input groups add floats, which breaks the typeahead's layout. Adding the clearfix classname to the typeahead fixes the issue, though currently there's no way to pass a classname to the parent component.

Also note that the multi-selection version of the component has unexpected behavior when used inside an input group because it's a div styled to look like an input, and some of the styles aren't correctly applied.

[ericgio]

Opened #75 to deal with the className issue. Once that's fixed it should at least temporarily solve your issue here.

[atuttle]

Why only temporarily? (I'm only using single-select mode)

[ericgio]

Sorry, "temporarily" might be the wrong word. It's a stopgap solution since it would allow you to pass the clearfix classname and fix your issue. However, the longer-term fix is to make the component behave correctly when used within an input-group without forcing the developer to do anything.

[atuttle]

Makes sense, thanks.

[krembo]

I had this issue too. Fixed it with adding the following CSS:

.input-group .bootstrap-typeahead.open {
    position: static !important;
}

See if it can help you.

[jasonswearingen]

fyi with the new bootstrap 4 beta, rendering inside a input-group is further messed up. putting the Typeahead by itself (not in an input-group) was my workaround.

[ericgio]

Fixed for Bootstrap 3 in v1.2.0. Bootstrap 4 is still officially unsupported.

[albertpeiro]

+1 for fixing this for Bootstrap 4