angular / angular/components

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

Open
#29,939 7 comments 0 reactions 0 assignees View on GitHub
area: material/form-field P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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

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:
1.
2.

### 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

- Angular: 18.2.10
- CDK/Material: 18.2.10
- Browser(s): Edge, Chrom
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Contributor guide

Open the contributing guide

Research direction

Start with the MatFormFieldNotchedOutline behavior for outline appearance and reproduce a conditional mat-label rendered with @if after initialization. Done means the outline no longer retains the no-label state and the label appears when it is added, matching the existing fill behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.