angular / angular/components

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

Đang mở
#31,056 5 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: material/form-field P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với bản tái hiện StackBlitz được cung cấp và chuyển đổi giữa các tab của mat-tab-group để xác nhận label và matPrefix bị chồng lên nhau. Theo dõi hành vi của mat-form-field và mat-tab-group trong mã nguồn Angular Material; công việc được hoàn tất khi label vẫn được định vị chính xác bên cạnh prefix sau khi chuyển tab.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.