angular / angular/components

bug(mat-form-field): Label position is wrong (appearance="outline") when mat-form-field is placed inside drawer

Abierto
#26,332 4 comentarios 3 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?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14

### Description

If the mat-form-field is empty and not focused, then the label moves behind the icon. the error only occurs with appearance="outline" and within a drawer that is not open by default

### Reproduction

Steps to reproduce:
1. place mat-form-field with appearance="outline" inside drawer
2. place icon inside fat-form-field with matPrefix

Demo
https://stackblitz.com/edit/angular-ivy-qb7mbe?file=src/app/app.component.ts
### Expected Behavior

old behaviour

### Actual Behavior

![image](https://user-images.githubusercontent.com/1451287/209673027-d7c82a0f-757f-44ce-9a5c-a1855ad598b4.png)

### Environment

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción vinculada de StackBlitz y verifica el mat-form-field vacío y sin foco dentro de un drawer que inicialmente está cerrado, usando outline appearance y un icono matPrefix. Lee el comportamiento relevante de form-field y drawer de Angular Material relacionado con el posicionamiento de la etiqueta. La tarea estará terminada cuando la etiqueta ya no se mueva detrás del icono y la reproducción coincida con el comportamiento anterior.

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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.