input-group validation wrong right border color

[tkrotoff]

Applies to Bootstrap 4.6.0 & 5.0.0-beta2.

Consider this 4.6.0 code:

<div class="input-group">
  <input class="form-control is-invalid">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">Button</button>
  </div>
</div>

https://codepen.io/tkrotoff/pen/rNWYbyJ?editors=1100

We get:

Instead of:

==> the input right border should be red instead of grey

The same happens with 5.0.0-alpha2: https://codepen.io/tkrotoff/pen/MWbrNpp?editors=1100

<div class="input-group">
  <input class="form-control is-invalid">
  <button type="button" class="btn btn-outline-secondary">Button</button>
</div>

Quick fix:

// 4.6.0
.input-group {
  .form-control.is-invalid,
  .custom-select.is-invalid {
    z-index: 3;
  }
}

// 5.0.0-beta2
.input-group {
  .form-control.is-invalid,
  .form-select.is-invalid {
    z-index: 3;
  }
}

FYI when focusing on the input, the right border is OK:

because of this code:

// Bring the "active" form control to the top of surrounding elements
> .form-control:focus,
> .form-select:focus {
  z-index: 3;
}

https://github.com/twbs/bootstrap/blob/v5.0.0-beta2/scss/forms/_input-group.scss#L20-L24

[ffoodd]

I guess it makes sense.