From a1b2071fe0dc1ea686218fb5e46f67bfb07c6b6f Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Sat, 24 Oct 2020 19:50:18 +0200
Subject: [PATCH] Require `.has-validation` for input groups with validation

---
 scss/_input-group.scss                        | 24 +++++++--
 .../4.5/assets/scss/_component-examples.scss  |  4 --
 site/docs/4.5/components/forms.md             | 52 +++----------------
 3 files changed, 26 insertions(+), 54 deletions(-)

diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index cad8ea367a82..d72ebeaba7af 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -42,7 +42,6 @@
 
   > .form-control,
   > .custom-select {
-    &:not(:last-child) { @include border-right-radius(0); }
     &:not(:first-child) { @include border-left-radius(0); }
   }
 
@@ -53,9 +52,24 @@
     align-items: center;
 
     &:not(:last-child) .custom-file-label,
-    &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
     &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
   }
+
+  &:not(.has-validation) {
+    > .form-control:not(:last-child),
+    > .custom-select:not(:last-child),
+    > .custom-file:not(:last-child) .custom-file-label::after {
+      @include border-right-radius(0);
+    }
+  }
+
+  &.has-validation {
+    > .form-control:nth-last-child(n + 3),
+    > .custom-select:nth-last-child(n + 3),
+    > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
+      @include border-right-radius(0);
+    }
+  }
 }
 
 
@@ -175,8 +189,10 @@
 
 .input-group > .input-group-prepend > .btn,
 .input-group > .input-group-prepend > .input-group-text,
-.input-group > .input-group-append:not(:last-child) > .btn,
-.input-group > .input-group-append:not(:last-child) > .input-group-text,
+.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
+.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
+.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
+.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
 .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
   @include border-right-radius(0);
diff --git a/site/docs/4.5/assets/scss/_component-examples.scss b/site/docs/4.5/assets/scss/_component-examples.scss
index a296718976c6..89c52208f4bc 100644
--- a/site/docs/4.5/assets/scss/_component-examples.scss
+++ b/site/docs/4.5/assets/scss/_component-examples.scss
@@ -333,10 +333,6 @@
   }
 }
 
-.bd-example-forms-input-group-workaround .fix-rounded-right {
-  @include border-right-radius(.2rem !important);
-}
-
 //
 // Code snippets
 //
diff --git a/site/docs/4.5/components/forms.md b/site/docs/4.5/components/forms.md
index b9fe4ca469d4..22a8904b9991 100644
--- a/site/docs/4.5/components/forms.md
+++ b/site/docs/4.5/components/forms.md
@@ -754,12 +754,6 @@ We are aware that currently the client-side custom validation styles and tooltip
 {% endcapture %}
 {% include callout.html content=callout type="warning" %}
 
-{% capture callout %}
-##### Input group validation
-Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the `.input-group` that has `.is-{valid|invalid}`. Placing feedback messages within input groups breaks the `border-radius`. [See this workaround](#input-group-validation-workaround).
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
-
 ### How it works
 
 Here's how form validation works with Bootstrap:
@@ -1157,50 +1151,16 @@ $form-validation-states: map-merge(
 }
 {% endhighlight %}
 
-### Input group validation workaround
-
-We're unable to resolve the broken `border-radius` of input groups with validation due to selector limitations, so manual overrides are required. When you're using a standard input group and don't customize the default border radius values, add `.rounded-right` to the elements with the broken `border-radius`.
-
-{% highlight html %}
-<div class="input-group">
-  <div class="input-group-prepend">
-    <span class="input-group-text">@</span>
-  </div>
-  <input type="text" class="form-control rounded-right" required>
-  <div class="invalid-feedback">
-    Please choose a username.
-  </div>
-</div>
-{% endhighlight %}
-
-<div class="bd-example bd-example-forms-input-group-workaround">
-  <div class="input-group">
-    <div class="input-group-prepend">
-      <span class="input-group-text">@</span>
-    </div>
-    <input type="text" class="form-control is-invalid rounded-right" required>
-    <div class="invalid-feedback">
-      Please choose a username.
-    </div>
-  </div>
-</div>
-
-When you are using a small or large input group or customizing the default `border-radius` values, add custom CSS to the element with the busted `border-radius`.
+### Input group validation
 
-{% highlight css %}
-/* Change values to match the radius of your form control */
-.fix-rounded-right {
-  border-top-right-radius: .2rem !important;
-  border-bottom-right-radius: .2rem !important;
-}
-{% endhighlight %}
+To detect what elements need rounded corners inside an input group with validation, an input group requires an additional `.has-validation` class.
 
 {% highlight html %}
-<div class="input-group input-group-sm">
+<div class="input-group has-validation">
   <div class="input-group-prepend">
     <span class="input-group-text">@</span>
   </div>
-  <input type="text" class="form-control fix-rounded-right" required>
+  <input type="text" class="form-control" required>
   <div class="invalid-feedback">
     Please choose a username.
   </div>
@@ -1208,11 +1168,11 @@ When you are using a small or large input group or customizing the default `bord
 {% endhighlight %}
 
 <div class="bd-example bd-example-forms-input-group-workaround">
-  <div class="input-group input-group-sm">
+  <div class="input-group has-validation">
     <div class="input-group-prepend">
       <span class="input-group-text">@</span>
     </div>
-    <input type="text" class="form-control is-invalid fix-rounded-right" required>
+    <input type="text" class="form-control is-invalid" required>
     <div class="invalid-feedback">
       Please choose a username.
     </div>