From 2f3aec819ae7bd04c00cc55fee977d12e11a46c6 Mon Sep 17 00:00:00 2001
From: Florian Lacreuse <lacreuse.florian@gmail.com>
Date: Wed, 31 Aug 2022 16:17:58 +0200
Subject: [PATCH] Fix input group z-index focus + validation

---
 scss/forms/_input-group.scss |  4 ++--
 scss/mixins/_forms.scss      | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 813679f0cc7e..247f74a7ac50 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -22,7 +22,7 @@
   > .form-control:focus,
   > .form-select:focus,
   > .form-floating:focus-within {
-    z-index: 3;
+    z-index: 5;
   }
 
   // Ensure buttons are always above inputs for more visually pleasing borders.
@@ -33,7 +33,7 @@
     z-index: 2;
 
     &:focus {
-      z-index: 3;
+      z-index: 5;
     }
   }
 }
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 81cd2e3ac4e3..2a853a789451 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -135,16 +135,16 @@
     }
   }
 
-  .input-group .form-control,
-  .input-group .form-select {
-    @include form-validation-state-selector($state) {
-      @if $state == "valid" {
-        z-index: 1;
-      } @else if $state == "invalid" {
-        z-index: 2;
-      }
-      &:focus {
-        z-index: 3;
+  .input-group {
+    > .form-control:not(:focus),
+    > .form-select:not(:focus),
+    > .form-floating:not(:focus-within) {
+      @include form-validation-state-selector($state) {
+        @if $state == "valid" {
+          z-index: 3;
+        } @else if $state == "invalid" {
+          z-index: 4;
+        }
       }
     }
   }