Can't get new input state added to the existing ones

Created by: karolyi

Hey,

I was trying to add a new custom form-control state to an input field using form-validation-state , next to is-valid and is-invalid.

I figured I'd add an is-waiting state with a loading circular icon. This was what I came up with:

$form-feedback-waiting-color:         $gray-500;
$form-feedback-icon-waiting-color:         $gray-500;
$form-feedback-icon-waiting:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-waiting-color}' viewBox='0 0 8 8'%3e%3cpath stroke='#{$form-feedback-icon-waiting-color}' d='M4 0c-1.65 0-3 1.35-3 3h-1l1.5 2 1.5-2h-1c0-1.11.89-2 2-2v-1zm2.5 1l-1.5 2h1c0 1.11-.89 2-2 2v1c1.65 0 3-1.35 3-3h1l-1.5-2z' transform='translate(0 1)'/%3e%3c/svg%3E"), "#", "%23") !default;

$form-validation-states: (
  "waiting": (
    "color": $form-feedback-waiting-color,
    "icon": $form-feedback-icon-waiting
  ),
);

@import "node_modules/bootstrap/scss/variables";

It wasn't working, despite the configuration being right. After some debugging, I realized it won't work (at least not on Chrome which I'm on now), because of the .was-validated &:#{$state}, definition: https://github.com/twbs/bootstrap/blob/da5f428b356d1d612f8d29905f01e8e839c670b6/scss/mixins/_forms.scss#L55

If I comment this one line out in bootstrap, it starts working (the icon SVG needs some extra work though). So I'm guessing Chrome just throws the entire definition away because of the said SASS/CSS definition.

Is there a way to fix this? Because of that, I had to resort to some custom css/javascript with fontawesome, which is at least animated when the state is is-waiting.