bug(form-field): red border-left leaking over .mdc-notched-outline__notch

[stephengeorgewest-navitaire]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The mat input form label sometimes has a border on the left when the form field is in a error state and is empty so the label is not floating and the hover state is active.

The border color from:

.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading, 
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch, 
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
	border-color: var(--mdc-outlined-text-field-error-hover-outline-color);
}

With a specificity of Specificity: (0,7,0) is taking priority over:

.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
	border-left: 1px solid transparent;
}

With it's specificity of Specificity: (0,7,0).

The note on the .mdc-notched-outline__notch class suggests this is sufficient.
https://github.com/crisbeto/material2/blob/e8b0f416cc714c1922118d7f40b706f37793fb01/src/material/form-field/_mdc-text-field-structure-overrides.scss#L162

// Note: class name is repeated to achieve sufficient specificity over the various MDC states.

But it may not be. If I add one more .mat-mdc-form-field, then the rule's specificity Specificity: (0,8,0) is sufficient to bring the style rule above the other, which solves my issue

Reproduction

I'm having trouble recreating the issue in a stack blitz. I think it is happening due to the order of module loading or the order the scss gets compiled to css, and thus the order that the styles get placed in the DOM. When I try to set it up in a stack blitz, the order of the two rules is reversed. I'm not sure what we could be doing to make the form-field.mjs load before the _form-field-theme.scss/_mdc-text-field-structure-overrides.scss

Expected Behavior

no border left on .mdc-notched-outline__notch

Actual Behavior

Some blead through of error-border on .mdc-notched-outline__notch

Environment

• Angular: 16.2.10
• CDK/Material: 16.2.10 (still an issue after upgrading to 17)
• Browser(s): Chrome 120.0.6099.200 (not an issue on firefox)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[princehorn]

Hi Stephen,

I ran into a similar issue where this border is visible if the Input/ Mat form field is focussed.

Furthermore I have trouble with the Label position of a Textarea wrapped into a Mat form field.

I'm creating my own Theme as described in the guide Theming Angular Material but declared some SASS functions and mixins to create different color themes for my application.
If I don't use my own Theme creation code but instead paste the simple code example from the above mentioned guide, these issues don't appear.

Thus I support your theory that something goes wrong if the styles are not applied or loaded in the correct order.

Maybe you can test my issue with the wrong label position of a textarea too and give me some feedback if you can reproduce this issue as well.

[princehorn]

Hi Stephen,

I fixed my issue by removing the CSS layers I defined to override some Material CSS rules within my own CSS classes to avoid the use of "!importend" (which didn't work anyway).
This strengthens your theory about the loading order of CSS files/ style tags.

[jpduckwo]

I get something similar caused by this reset css from tailwind base interfering and it results in border-style solid applying to mdc-notched-outline__notch

[Eliseonop]

WTF

[AnuroopSuresh]

having the same issue. in v19 custom theme

[paulriversx]

Same issue here, conflict with tailwind default overrides.

[paulriversx]

Patch here: tailwindlabs/tailwindcss#9993 (reply in thread)

[AnuroopSuresh]

@paulriversx Works, Ty.