mat-form-field: ":label-shown" pseudoclass

[martin-havala]

trafficstars

What are you trying to do?

Hi all!

tl;dr;

Is :label-shown preudo-class used in form-field component necessary / valid? (e.g. https://github.com/angular/components/blob/master/src/material/form-field/_form-field-fill-theme.scss#L100)

Problem background

I'm trying to use polyfill for paged media (https://www.pagedmedia.org/paged-js/) in combination with "@angular/material": "12.2.4" and it complains about :

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label' is not a valid selector. at <anonymous>:1:10

Breaking it down, the only breaking part in selector is pseudo-selector ":label-shown" about which existence I've never heard of anywhere else.

What troubleshooting steps have you tried?

I've tried to filter out css styles used in my application, problem emerges when mat.core mixin is in place.

Reproduction

Steps to reproduce:

1. check https://stackblitz.com/edit/angular-ivy-24s2x2?file=src/app/app.component.scss
2. comment / uncomment mat.core in app.component.scss

Environment

• Angular: 12.1.2
• CDK/Material: 12.2.4
• Browser(s): Google Chrome Version 96.0.4664.110 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Pro

[crisbeto]

I haven't heard about :label-shown either, but my guess is that it was used to increase the specificity of the selector. The :not() always matches, but it still increases the specificity.

[crisbeto]

Okay, I think I figured out what happened. We used to have :placeholder-shown in there which is an actual pseudo selector. When we changed the label/placeholder terminology in #8223, it was renamed and we didn't notice it until now.

[martin-havala]

@crisbeto thank you for a quick reply!

If it may help, I've just opened a PR to fix pseudo class (I did not go through complete #8223 diff)

[DanielHabenicht]

Did this land in any version? or is there a workaround? Having the same problem with Angular 13.3.0

[tszpinda]

Don't think it's fixed, did anyone manage to workaround this? (and use pagedjs with material)

[martin-havala]

honestly, I gave it up here as I had to use completely different approach to achieve my PDF export goals anyway and I had no time to deep dive into material do's and don't

[DanielHabenicht]

@crisbeto can you draft a way forward?

If it is a breaking change we can wait for another major version , but keeping it not compliant seems illogical.

[crisbeto]

I was under the impression that #24183 would fix it. @martin-havala why did you end up closing the PR? I can also make the same change and try to get it through.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}