Fix react-bootstrap-typeahead with input-group on Bootstrap 4.0.0-beta.2

react-bootstrap-typeahead CSS

/* fixes react-bootstrap-typeahead
-------------------------------------------------- */
.input-group .rbt {
  width:100%;

  .rbt-input.form-control {
    width: 100%;
    @extend .border-primary;

    // Fixes input-group not taking width
    .rbt-input-wrapper,
    .rbt-input-wrapper div,
    .rbt-input-wrapper input {
      width: 100% !important;
    }

    // Copied from mixins/_forms.scss
    &.focus {
      color: $input-focus-color;
      background-color: $input-focus-bg;
      border-color: $input-focus-border-color;
      outline: none;
      // Avoid using mixin so we can pass custom focus shadow properly
      @if $enable-shadows {
        box-shadow: $input-box-shadow, $input-btn-focus-box-shadow;
      } @else {
        box-shadow: $input-btn-focus-box-shadow;
      }
    }

    .rbt-input-wrapper input.rbt-input-main {
      color: $input-color !important;

      // Copied from /node_modules/bootstrap/scss/_forms.scss
      &::placeholder {
        color: $input-placeholder-color;
        // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
        opacity: 1;
      }
    }
  }
}