diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index 7a9a14dd7be3..5611f85c5be9 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -128,12 +128,26 @@ // 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); + } + } + + &.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)"; } - > :not(:first-child):not(.dropdown-menu) { + > :not(:first-child):not(.dropdown-menu)#{$validation-messages} { margin-left: -$input-border-width; @include border-left-radius(0); } 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 >}}
@@ -183,7 +185,7 @@ For invalid fields, ensure that the invalid feedback/error message is associated
-
+
@
@@ -314,7 +316,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
-
+
@
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 539f04821b89..2d30ee004ea1 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