Missing border radius on input group with validation feedback

[MoritzBru]

With new beta 3 and using the new input-group stuff, inputs inside input-groups with some validation feedback after them are missing the border-radius.

red circle: without border-radius
green circle: with border-radius

This is an example from the bootstrap documentation

[mdo]

Damn, I'm super disappointed in myself for not catching this during Beta 3. I thought I had this all locked up with that rewrite. This is going to be tough.

/cc @ysds in case he has ideas having looked at some of this code recently

[mdo]

I spent an hour on this last night and had nothing, but just had an idea to use the validation state.

  .form-control,
  .custom-select {
    &:not(:last-child) { @include border-right-radius(0); }
    &:not(:first-child) { @include border-left-radius(0); }

    &:not(:last-child):required,
    &:not(:last-child).is-valid,
    &:not(:last-child).is-invalid {
      @include border-right-radius($input-border-radius);
    }
  }

This works on the particular docs example, but I need to see if it doesn't work elsewhere.

[ysds]

@mdo I am terribly sorry for the lack of confirmation. There is still a issue. e.g. appended addon:

<div class="input-group mb-3">
  <input type="text" class="form-control is-invalid" placeholder="Recipient's username">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
  <div class="invalid-feedback">
    Please provide a valid zip.
  </div>
</div>

I created various test cases here. https://codepen.io/fellows3/pen/OzmMoz

[mdo]

Nice, thanks for the test case. I've forked your pen to:

• Add my latest built CSS from my local changes I included in my last comment. This fixes the main validation bug from the docs, as well as the rounding of our file inputs.
• Remove validation on multiple inputs—there's no way to do this, and we already explicitly do not support this.

See https://codepen.io/emdeoh/pen/OzmNNw?editors=1100. Have to improve some custom select and custom file, as well as dealing with the appended as you noted.

[ysds]

We also have to suppose a .was-validated case like:
https://getbootstrap.com/docs/4.0/components/forms/#custom-styles

[mdo]

@ysds That's where I'm hoping :required can help, which I've included in that snippet. Might need to sneak :optional in there, too.

[ysds]

I don't have any solution with only CSS3 selector to this issue. It would be impossible.

I think we should move .invalid-feedback to outside of input group. And then, extend .input-group class (.has-valid/invalid) as many times proposed in #23454. That would solve most of the issues (validation feedback of multiple input and combination with custom file input etc.). The .has-valid/invalid class will be unnecessary in the future by :has selector of CSS4.

[mdo]

Hmm, that'd be a breaking change from the final beta. I'm pushing for no breaking changes, but we'll see. I agree there doesn't seem to be a solution. I was trying to use some :nth-last-child stuff, but that's a bit messy right now.

[mdo]

I have some real funky CSS for y'all in #25352 to address as much of this as I can. 😅

[altbdoor]

Just dropping my two cents. I'm using v4.0 at the moment, and I was able to get the rounded corners back on the appended button with:

<div class="input-group">
    <input type="text" class="form-control is-invalid" readonly required>
    
    <div class="input-group-append">
        <button class="btn btn-outline-secondary rounded-right" type="button">
            Hey
        </button>
    </div>
    
    <div class="invalid-feedback">
        Error
    </div>
</div>

It needs an extra declaration of .rounded-right on the element within the .input-group-append. Not the most elegant, but at least it works.