angular / angular/components

bug(MatMenu): Menu item with menuTrigger combine with menu item in sub component does not clos sub menu

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

![image](https://github.com/angular/components/assets/6987117/f79c0a39-5f3e-4ccc-b888-30b3d3a8038a)

A mat-menu, using a `mat-menu-item` with a `matMenuTriggerFor` next to a menu-item in a sub component does not properly closes sub menu and handle highlighted item on mouse over.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/x3u2hh?file=src%2Fexample%2Fmenu-nested-example.html
Steps to reproduce:
1. Open menu by clicking _Animal index_ button
2. Mouse Over _Vertebrates_ menu, the sub menu opens
3. Mouse Over _Menu item component_

### Expected Behavior

The Vertebrates sub menu should close and Vertebrates menu should no longer be highlighted
only menu-item _Menu item component_ should be highlighted

### Actual Behavior

The Vertebrates sub menu is still open and Vertebrates menu is still highlighted along with _Menu item component_

### Environment

- Angular: 16.1
- CDK/Material: 16.2.9
- Browser(s): chrome / Edge
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

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, đặc biệt là src/example/menu-nested-example.html, và tái hiện chuỗi hover cho mat-menu lồng nhau. Theo dõi tương tác giữa menu-item và matMenuTriggerFor để xác định lý do mục cha vẫn được đánh dấu và mở; hoàn tất khi submenu Vertebrates đóng lại và chỉ Menu item component còn được đánh dấu.

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.