Border indicating failed input field validation in input group is hidden behind its neighbor element

[n01337]

In contrast to a focused input element, the invalidity indicator border (red by default) is hidden behind its neighboring elements. It would be worthwhile to optionally allow to show this border around the whole input group or otherwise raise its zIndex appropriately.

Applies to the bootstrap v5.0.0-beta3.

What it looks like
How it should look like

The images are a combination of an input and a select element put within an input group.

[korki43]

Example Codepen: https://codepen.io/korki43/pen/ExZmwNr

[korki43]

The following lines in mixins/_forms.scss seem to cause the problem:

bootstrap/scss/mixins/_forms.scss

Lines 135 to 140 in bfafabf

	.input-group .form-control,
	.input-group .form-select {
	@include form-validation-state-selector($state) {
	z-index: 3;
	}
	}

This was added in #33211 to make the right border of invalid elements in form groups also appear red.

I think reverting #33211 is the best option for now. It violates the z-index scales approach and also doesn't really fix the problem (as you can see in my example with two validated elements).

Ref: #33204 #33211

[jatinmehta]

@mdo I will be creating a PR for this.

[jatinmehta]

I have raised a PR for this here - #33644