angular / angular/components

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

Abierto
#26,349 1 comentario 9 reacciones 0 asignados Ver en GitHub
area: material/form-field P2
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Empieza reproduciendo los casos de etiquetas largas en el StackBlitz vinculado, cubriendo las apariencias outlined y filled con prefijos y controles input o select. Sigue el comportamiento implicado de Angular Material form-field y verifica que las etiquetas quepan dentro del campo o se trunquen con puntos suspensivos de forma coherente sin desbordarse.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.