angular / angular/components

bug(MatGroupTabs): MatTabBody content within a MatMenu does not display

Đang mở
#27,265 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: material/tabs 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

MatTab content in a mat menu will disappear when opening and closing the menu and transitioning between tabs. I believe the animations set the visibility to hidden; however, it will get in a state where it thinks it should be hidden even though the tab is highlighted causing the tab label to be the only thing visible.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/ewu1na?file=src%2Fexample%2Fmenu-overview-example.html
Steps to reproduce:
1. Open Mat Menu
2. Select Second Tab
3. Click outside of MatMenu to close menu
4. Open menu and rapidly select either tab (may have to repeat steps 1-4). The key is to rapidly click the tabs, the content will disappear and will not come back until a few transitions. I think the animation is hiding it and never triggering it to display

### Expected Behavior

I expect tab content to be visible when a tab is in view and selected.

### Actual Behavior

Tab content is hidden tab content should be visible

### Environment

- Angular: 16.03
- CDK/Material: 16
- Browser(s): Edge
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

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 liên kết và theo dõi hành vi của MatGroupTabs/MatTabBody bên trong MatMenu khi nhanh chóng chuyển đổi giữa các tab và mở lại menu. Điều tra trạng thái chuyển tiếp khiến nội dung của tab được chọn bị ẩn; công việc được xem là hoàn tất khi nội dung được chọn vẫn hiển thị sau các chu kỳ lặp lại gồm đóng, mở lại và chuyển đổi 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
35/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.