search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.38k stars 6.75k forks source link

but(FormFiled): Floating label hide/show not responsive when set to outline appearance. #29939

Open Cole-Jaeger opened 2 weeks ago

Cole-Jaeger commented 2 weeks ago

Is this a regression?

The previous version in which this bug was not present was

No response

Description

When you have a mat form field and the mat-label is conditional. If the view starts with the label and gets remove with @if in template it is perfectly fine. Will disappear and reappear. If the view starts with-out the mat label rendered, the label will get rendered but the component, 'MatFormFieldNotchedOutline" still has the class, 'mdc-notched-outline--no-label', so the display is set to none.

Looks as though if the mat-label is not there on view init it is not responsive.

The behavior works fine with fill appearance.

Reproduction

StackBlitz link: Steps to reproduce:

Expected Behavior

When mat-label gets rendered in even after init, i.e. Using a structural directive or decorator such *ngIf or @if. The label should show no matter the appearance.

Actual Behavior

When you have the appearance set to outline and the view is initially rendered without the label it is not responsive and will not show up.

Environment

Totati commented 2 weeks ago

Duplicate of #26579

Cole-Jaeger commented 2 weeks ago

I don't think this is a duplicate of that other bug. That one is only happening on fill appearance while this is happening on the outline appearance. This is a specific issue of what it seems like is in the "ngAfterViewInit" in the MatFormFieldNotchedOutline component. A component that does not even get added when appearance is set to fill.

amysorto commented 2 weeks ago

Hi @Cole-Jaeger, can you provide a StackBlitz with the issue reproduced. This is the template for it: https://stackblitz.com/fork/components-issue-starter

Cole-Jaeger commented 1 week ago

Absolutely @amysorto ! https://stackblitz.com/edit/components-issue-starter-gjragy?file=src%2Fmain.ts

This is a super simple example in my app the "showLabel" is based off of a media break point but this example just uses a simple toggle.

Please let me know if you need anything else

Thank you.

amysorto commented 1 week ago

@Cole-Jaeger thanks for the link, I am able to reproduce the issue