angular / angular/components

bug(mat-form-field): Incorrect display of long field label while not floating

Open
#26,349 1 comment 9 reactions 0 assignees View on GitHub
area: material/form-field P2
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

There are apparently several issues with the display of long label text in form fields that are not floated as is apparent from the following screen shot:

![grafik](https://user-images.githubusercontent.com/11717833/210228846-af7290ad-2bb0-45ff-b432-e7ef9cd837d3.png)

This is the Stackblitz that the shot was taken from: https://stackblitz.com/edit/angular-m5oo6h

As you can see:

* The label is transformed out of the form field with outlined appearance and a prefix
* Ellipsis is not being applied with filled appearance and an input (while mat-select displays beautifully), no matter if a prefix is applied or not

### Reproduction

Steps to reproduce:
1. Use a form field with a long label
2. Add an element with matPrefix to that form field

### Expected Behavior

The label should be sized and ellipsized to fit the form field

### Actual Behavior

The label overflows the form field or is not ellipsized, depending on the details of the field configuration.

### Environment

- Angular: 15.0.3
- CDK/Material: 15.0.3
- Browser(s): Firefox 108, Chromium 108
- Operating System (e.g. Windows, macOS, Ubuntu): Fedora 38

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the long-label cases in the linked StackBlitz, covering outlined and filled appearances with prefixes and input or select controls. Trace the Angular Material form-field behavior involved and verify that labels fit within the field or are ellipsized consistently without overflowing.

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
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.