angular / angular/components

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

Offen
#26,332 4 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/form-field P2
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verknüpften StackBlitz-Reproduktion und überprüfe das leere, nicht fokussierte mat-form-field innerhalb eines zunächst geschlossenen drawer, das die outline appearance und ein matPrefix-Symbol verwendet. Lies das relevante Verhalten von Angular Material für form-field und drawer im Zusammenhang mit der Positionierung des Labels. Die Aufgabe ist abgeschlossen, wenn sich das Label nicht mehr hinter das Symbol bewegt und die Reproduktion dem vorherigen Verhalten entspricht.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.