From b48263cd7e4ee9b7e4c4119a012d6543e2c9e221 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Thu, 22 Oct 2020 10:42:05 +0200
Subject: [PATCH 1/4] Require `.has-validation` class to fix border radii on
 form elements

---
 scss/forms/_input-group.scss              | 8 +++++---
 site/content/docs/5.0/forms/validation.md | 6 ++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 7a9a14dd7be3..065f8c611777 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -128,9 +128,11 @@
 
 // stylelint-disable-next-line no-duplicate-selectors
 .input-group {
-  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
-  > .dropdown-toggle:nth-last-child(n + 3) {
-    @include border-right-radius(0);
+  &:not(.has-validation) {
+    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
+    > .dropdown-toggle:nth-last-child(n + 3) {
+      @include border-right-radius(0);
+    }
   }
 
   > :not(:first-child):not(.dropdown-menu) {
diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index 65b86520311d..a3fa32689abe 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -165,6 +165,8 @@ We recommend using client-side validation, but in case you require server-side v
 
 For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced, in case the field already points to additional form text).
 
+To fix [issues with border radii](https://github.com/twbs/bootstrap/issues/25110), input groups require an additional `.has-validation` class.
+
 {{< example >}}
 <form class="row g-3">
   <div class="col-md-4">
@@ -183,7 +185,7 @@ For invalid fields, ensure that the invalid feedback/error message is associated
   </div>
   <div class="col-md-4">
     <label for="validationServerUsername" class="form-label">Username</label>
-    <div class="input-group">
+    <div class="input-group has-validation">
       <span class="input-group-text" id="inputGroupPrepend3">@</span>
       <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
       <div id="validationServerUsernameFeedback" class="invalid-feedback">
@@ -314,7 +316,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
   </div>
   <div class="col-md-4 position-relative">
     <label for="validationTooltipUsername" class="form-label">Username</label>
-    <div class="input-group">
+    <div class="input-group has-validation">
       <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
       <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
       <div class="invalid-tooltip">

From afd40ed61cbad4876595007044f7aa56f5cf7c79 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Thu, 22 Oct 2020 10:46:25 +0200
Subject: [PATCH 2/4] Fix border radii on validation messages

---
 scss/forms/_input-group.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 065f8c611777..9ae896cc4455 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -135,7 +135,12 @@
     }
   }
 
-  > :not(:first-child):not(.dropdown-menu) {
+  $validation-messages: "";
+  @each $state in map-keys($form-validation-states) {
+    $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
+  }
+
+  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
     margin-left: -$input-border-width;
     @include border-left-radius(0);
   }

From 9b503f4ba9eb66d8f577da34b5cebed6b76d1cf1 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Thu, 22 Oct 2020 20:29:23 +0200
Subject: [PATCH 3/4] Fix border radius for inputs groups with validation

---
 scss/forms/_input-group.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 9ae896cc4455..5611f85c5be9 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -135,6 +135,13 @@
     }
   }
 
+  &.has-validation {
+    > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
+    > .dropdown-toggle:nth-last-child(n + 4) {
+      @include border-right-radius(0);
+    }
+  }
+
   $validation-messages: "";
   @each $state in map-keys($form-validation-states) {
     $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";

From 07483d8f7755a43d160d96b8970e12e4f695f007 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Sat, 24 Oct 2020 18:45:14 +0200
Subject: [PATCH 4/4] Update migration guide

---
 site/content/docs/5.0/migration.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 6e5734854b2c..48f63a85ed04 100644
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -21,6 +21,10 @@ toc: true
 
 - Introduce `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
 
+### Forms
+
+- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.
+
 ## v5.0.0-alpha2
 
 ### Sass