Validated inputs in .input-group shouldn't be behind sibling element

[jatinmehta]

Reverted changes done in PR #33211 to fix #33541

[ffoodd]

What about scoping the z-index to the invalid state instead?

Reverting the fix will obviously reintroduce the initial issue, and I think we can solve both cases by only checking that $state is invalid.

[jatinmehta]

@ffoodd I have made the required changes, does this solve both the problems?

[korki43]

Scoping the z-index to the invalid state would help with a valid input next to an invalid one, but if two invalid inputs are directly next to each other this won't work.

@jatinmehta the scss you introduced in the last commit won't work. You have to create the selectors using the .is-invalid class and .was-validated with the css pseudo-selector :invalid.

Perhaps we could scope the z-index to a focused input element. I'll have a look on it.

[korki43]

The following patch (on top of main) will solve most issues (demo).
The middle border will stay in the color of the right element except when the left element is focused, which seems ok to me.

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 283462fd5..e86bd8aef 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -130,7 +130,9 @@
   .input-group .form-control,
   .input-group .form-select {
     @include form-validation-state-selector($state) {
-      z-index: 3;
+      &:focus {
+        z-index: 3;
+      }
     }
   }
 }

[ffoodd]

@korki43 Might seems OK to you but you're reintroducing #33204. The previous fix intended to ensure validation state are above; #33541 is about making invalid state above valid state.

I'd be in favor of a local scale, with valid state being 2 and invalid state being 3. This way we ensure validation states are above default state, and that invalid state is above valid state.

@jatinmehta You need to keep the form-validation-state-slector mixin and check the state inside. I'll suggest a thing.

[ffoodd]

I also forked @korki43's pen to use this PR's dist file directly. Thanks for the test case!

[ffoodd]

Based on the Pen using last commit, I think we should add a rule regarding :focus too, so that focused input is above any other one.

Something like:

&:focus {
 z-index: 3;
}

Right after the @else if block.

Andy thought?

[jatinmehta]

@ffoodd I think adding z-index: 3 for focus as well will solve all the issues.

[jatinmehta]

@ffoodd I have made the requested changes. Can this PR be merged now?

[ffoodd]

LGTM, I updated my CodePen to ease testing various combinations and it works great.

Thanks for your patience and involvement!

[XhmikosR]

@mdo should we include this in v5.0.0?

[jatinmehta]

@mdo Can this PR be merged now?

[korki43]

@jatinmehta no worries, it'll be merged. Just wait for the formal questions to be discussed.