angular / angular/components

bug(form-field): Label overlaps matPrefix in mat-tab-group on tab change

未关闭
#31,056 5 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
area: material/form-field P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

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

![image-1](https://i.ibb.co/Rp8z0R51/image-1.png)
![image-2](https://i.ibb.co/KxpWfbx2/image-2.png)

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

贡献指南

打开贡献指南

调研方向

从提供的 StackBlitz 重现开始,在 mat-tab-group 的选项卡之间切换,以确认 label 与 matPrefix 发生重叠。在 Angular Material 源码中追踪 mat-form-field 和 mat-tab-group 的行为;切换选项卡后 label 仍能正确定位在 prefix 旁边,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。