#25110 Missing border radius on input group with validation feedback

[dejakob]

Issue reported

With new beta 3 and using the new input-group stuff, inputs inside input-groups with some validation feedback after them are missing the border-radius.

See: #25110

Cause of issue

There is a selector in _input-group.scss that sets border-radius to 0 on all elements within an input-group that are not a dropdown or the last element:

.input-group {
  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu)

Proposed solution

I added an extra pseudo-selector to check if there is no .invalid-feedback element coming after it, before overriding the border-radius to 0.

[ffoodd]

Thanks for submmitting a PR, and documenting it clearly!

However :has() has litterally no support at all… so your PR only invalidates the selector stack: look at .input-group-text, it get its right angles rounded.

As per comment, the current pattern does not allow to solve this: v5 would probably need to handle this by changing the HTML pattern, as stated in a comment too.

I'm closing this as a won't fix for now, but feel free to open another PR with a new pattern suggestion. This is one of our painpoint in v4, and we hope to find a way for v5 :)