.invalid-feedback still appears on valid elements

[charles-toller]

I'm running Windows 10 15063.540 with Chrome 60.0.3112.90.

.invalid-feedback does correctly appear when the class .is-invalid or :invalid is applied to the input element, but it also appears when .is-valid or :valid is applied to the input. From forms.scss:26:

.form-control,
.custom-select {
   .was-validated &:#{$state},
   &.is-#{$state} {
      border-color: $color;

      &:focus {
        box-shadow: 0 0 0 .2rem rgba($color,.25);
      }

      ~ .invalid-feedback,
      ~ .invalid-tooltip {
        display: block;
      }
  }
}

It appears that the display: block is applied no matter what $state actually is.

[mdo]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

---

This is a saved reply.

[charles-toller]

Bootstrap Version: 4.0.0-beta
OS: Windows 10 15063.540
Browser: Chrome 60.0.3112.90
JS Bin: https://jsbin.com/vizelarani/edit?html,output

[mdo]

Ahh, I see the problem. Thanks. PR is at #23377.