bug(form-field): Label overlaps matPrefix in mat-tab-group on tab change
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### 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
When a mat-form-field with appearance="outline" and a matPrefix (e.g., an icon) is placed inside a mat-tab within a mat-tab-group, the mat-label (acting as a placeholder) overlaps with the matPrefix icon after switching tabs.
The issue is typically observed as follows:
- The form field renders correctly on the initially selected tab.
- When switching to a different tab containing a similar form field, the label of that form field incorrectly overlaps the prefix icon.
- Switching back to the first tab might then also show the overlap.
This behavior makes the form field difficult to read and use.


### Reproduction
StackBlitz link: [Link](https://stackblitz.com/edit/stackblitz-starters-sqfx3qcf?file=src%2Findex.html)
### Expected Behavior
The mat-label (placeholder) of the mat-form-field should always be positioned correctly to the right of the matPrefix icon, without any overlap, regardless of tab switching. The prefix icon should create sufficient space for itself, and the label should respect this space when not floated.
### Actual Behavior
After switching to a tab that was not initially active, the mat-label (placeholder) of the mat-form-field incorrectly overlaps with the matPrefix icon. The label does not seem to account for the space occupied by the prefix. This issue is consistently reproducible with the provided minimal reproduction steps.
### Environment
- Angular: 19.0.5
- CDK/Material: 19.0.4
- Browser(s): Google Chrome
- Operating System (e.g. Windows, macOS, Ubuntu):
Edition Windows Server 2025 Datacenter Evaluation
Version 24H2
OS build 26100.2894
Beitragsleitfaden
Rechercherichtung
Beginne mit der bereitgestellten StackBlitz-Reproduktion und wechsle zwischen den Tabs der mat-tab-group, um zu bestätigen, dass sich das Label und matPrefix überlappen. Verfolge das Verhalten von mat-form-field und mat-tab-group in den Angular-Material-Quellen; die Aufgabe ist abgeschlossen, wenn das Label nach Tab-Wechseln korrekt neben dem Prefix positioniert bleibt.
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
- 45/100