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.

[MoritzBru]

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

I guess thats what betas are for. 😉

@altbdoor Jep generally this works.
But when you change the $input-border-radius then you run into problems because the border utilities are based on the general $border-radius

[cbossi]

I found a solution to the problem using bootstrap's order classes:
You can place the .invalid-feedback element in between the input and the input-group-append element and then append the order-1 class to it. This way the .invalid-feedback element is NOT the last child inside the input-group (which would cause the border radius problem), but nonetheless appears at the end of the input-group:

<div class="form-group">
    <label for="name">Name</label>
    <div class="input-group">
    <input type="text" class="form-control" id="name" required>
    <div class="invalid-feedback order-1">
        Please provide a name.
    </div>
    <div class="input-group-append">
        <span class="input-group-text">
        <i class="fas fa-envelope"></i>
        </span>
    </div>
    </div>
</div>

[mdo]

We've added notes to our documentation and improved examples to incorporate the workarounds here. See #30180 and #25110 (comment).

[mdo]

We'll also need to revisit this in v5 to see if HTML/CSS breaking changes could fix it without a workaroud.

[mdo]

Possible fix with a greatly simplified input group component coming for v5. See #31666 and please let me know your thoughts.

[reFX-Mike]

This bug still happens with 5.0.0-beta3 when there are TWO validation fields for a form-group (valid and invalid).

<label for="firstname" class="form-label">{{ site.name }}</label>
<div class="input-group has-validation">
	<span class="input-group-text"><i class="far fa-user-circle"></i></span>
	<input type="text" name="firstname" class="form-control" minlength="2" maxlength="100" required autofocus>
	<div class="invalid-feedback">Please enter a first name (minimum 2 characters)</div>
	<div class="valid-feedback">Looking good</div>
</div>

[fhughes90]

I'm still seeing this bug in v5.1.

<div class="col-md-2">
   <label for="inputStationID" class="form-label">
      Station ID
   </label>
   <div class="input-group has-validation">
      <span class="input-group-text">
         S
      </span>
      <input type="text" class="form-control" id="inputStationID" placeholder="6392" required>
      <div class="valid-feedback">
         Looks good!
      </div>
      <div class="invalid-feedback">
         This is not an acceptable value.
      </div>
   </div>
</div>

[julien-deramond]

Please create a new issue with a reference to this one.

[TCB13]

As expected adding the class rounded-end to the span is a workaround for this issue in 5.2.

 <span class="input-group-text rounded-end"