Virtualized select design got disturbed with Bootstrap 4

Question

I was using virtualized select with Bootstrap 3 and recently upgraded to Bootstrap 4, but after that virtualized select design got disturbed totally.

Below I am providing the code snippet for the same:

import VirtualizedSelect from 'react-virtualized-select'; 
import 'react-select/dist/react-select.css'; 
import 'react-virtualized/styles.css'; 
import 'react-virtualized-select/styles.css';

<div className="input-group customSearchBar">
                <div className="input-group-prepend"><span className="input-group-text"><i className="fa fa-search"></i></span></div>
                <VirtualizedSelect ref={objNode => this.objVirtualizedSelect = objNode} labelKey={this.state.labelKey} async={true} loadOptions={this.getOptions}
                valueKey={this.state.valueKey} disabled={this.state.disabled} clearable={this.state.clearable}
                value={this.state.selectValue} placeholder={this.state.placeholder} multi={this.state.multi}
                joinValues={this.state.joinValues} simpleValue={this.state.simpleValue} autoload={false}
                backspaceRemoves={this.state.backspaceRemoves} deleteRemoves={this.state.deleteRemoves}
                onChange={this.updateValue.bind(this)} closeOnSelect={this.state.closeOnSelect} onSelectResetsInput={this.state.onSelectResetsInput} />
                <div className="input-group-append">
                        <button className="btn btn-primary" type="button" disabled={this.state.disabled} title={this.state.multiLangMsgs.ADD_USERS_TO_GROUP} onClick={this.addUsersClick}>
                                <i className="fa fa-plus"></i>
                        </button>
                </div>
        </div>

With Bootstrap 3

With Bootstrap 4

I have created a sandbox for the same

Virtualized Select

Answer 1

The first element in VirtualizedSelect is a relative div that has Select is-clearable is-searchable Select--single class names. It does not have width.

input-group is a flex element. By default, all of its immediate content take as much space as they need in this case since you have not used a form-control element. If you need that the Select element takes all the available space, you must specify it.

The best way is to use a div with flex-grow-1 class as a container for the VirtualizedSelect. Doing so, it takes all the available space.

    <div className="flex-grow-1">
      <VirtualizedSelect options={options} />
    </div>  

https://codesandbox.io/s/w0op7n5rw8

---

You could use form-control, but it applies some other styles too. Therefore, flex-grow-1 is the best solution.