angular / angular/components

bug(mat-form-field): Label for outline mat-form-field is overlapping matPrefix icon in a mat-sidenav

Open
#28,313 4 comments 3 reactions 0 assignees View on GitHub
area: material/form-field area: material/sidenav P3
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

I noticed that the `transform` property on the `` for a `mat-form-field` with `appearance="outline"` isn't correctly picking up the width of the icon, if the form field has a `matPrefix`. This is specific to when the form field is within a `mat-sidenav` (perhaps other components that aren't visible on component init, but I haven't tried).

See attached images of the DOM elements and place in the code where this is calculated, plus attached blitz which shows the correct behavior for a `mat-form-field` with `appearance="fill"`

![image](https://github.com/angular/components/assets/15719045/d2662080-5d19-47b2-90ac-e8fe1e0b6d5e)

![image](https://github.com/angular/components/assets/15719045/ed36b6d9-234c-4205-a6cf-401ac762720c)

### Reproduction

StackBlitz link: https://stackblitz.com/edit/i6aa9z
Steps to reproduce:
1. Add a `mat-form-field` with a `matPrefix` and `appearance="outline"` to a `mat-sidenav`
2. Toggle the `mat-sidenav` open

### Expected Behavior

Label should be shifted to the left so that it does not overlap the icon

### Actual Behavior

Label is overlapping the prefix icon

### Environment

- Angular: 17.0.0
- CDK/Material: 17.0.4
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS, Windows

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect the mat-form-field outline label transform calculation when the field is initially inside a closed mat-sidenav. Compare the outline and fill appearances, then verify that opening the sidenav shifts the label clear of the matPrefix icon.

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
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.