Merge pull request #18265 from twbs/fix-v4-17007

Bring focused input group controls to front via z-index:3

1 files changed, 9 insertions, 1 deletions

diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index 3b4ef632c..ad09d28a8 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -19,6 +19,10 @@
     // proper border colors.
     position: relative;
     z-index: 2;
+    // Bring the "active" form control to the front
+    @include hover-focus-active {
+      z-index: 3;
+    }
     @if $enable-flex {
       flex: 1;
     } @else {
@@ -160,7 +164,7 @@
     }
     // Bring the "active" button to the front
     @include hover-focus-active {
-      z-index: 2;
+      z-index: 3;
     }
   }
 
@@ -176,6 +180,10 @@
     > .btn-group {
       z-index: 2;
       margin-left: -1px;
+      // Because specificity
+      @include hover-focus-active {
+        z-index: 3;
+      }
     }
   }
 }