From d81d0a92d4c250e010eb085fe4b35824d12b4c8c Mon Sep 17 00:00:00 2001
From: Jatin Mehta <mehtajatin05@gmail.com>
Date: Thu, 13 May 2021 11:09:01 +0530
Subject: [PATCH] Validated inputs in `.input-group` shouldn't be behind
 sibling element (#33644)

Added z-index property for input-group only for invalid state
---
 scss/mixins/_forms.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 283462fd5601..dc5bdb0b9256 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -130,7 +130,14 @@
   .input-group .form-control,
   .input-group .form-select {
     @include form-validation-state-selector($state) {
-      z-index: 3;
+      @if $state == "valid" {
+        z-index: 1;
+      } @else if $state == "invalid" {
+        z-index: 2;
+      }
+      &:focus {
+        z-index: 3;
+      }
     }
   }
 }