angular / angular/components

bug(Menu): Incorrect position of submenu while using ng-template

Đang mở
#26,252 3 bình luận 2 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?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

11.x

### Description

After some digging, I found the commit that break the positioning of the submenu when the menu items are created by using `ng-template`

The first related issue is #16167 and the corresponding [commit](https://github.com/angular/components/commit/44293522e98bbd975e5fba2551421af32631f2de) changed the way the padding is determined. Instead of using a fix value, it calculates the padding from the "offset of the first item".

Also, another issue (which is still open) #14842 clearly states that `@ContentChildren` does not find child elements created via `ngTemplateOutlet`.

These hand in hand break our code when we changed Angular version. Here is what happens:
- We have a template for "no-child menu items"
- The menu item is created by using `ngTemplateOutlet` when the menu item does not have any child element
- Otherwise, a `button[mat-menu-item]` is created directly

This causes a problem, since the `_items` collection of the menu does not contain the elements created from the `ng-template` so the calculated "padding" is totally wrong (in our case 200px instead of 8px).

A possible fix would be that instead of using the first item offset, the style of the first item's parent could be calculated using [window.getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle), for example.

### Reproduction

Steps to reproduce (see [stackblitz](https://stackblitz.com/edit/components-issue-rlxajt?file=src/app/example-component.html)):

1. Open the main menu
2. Open a submenu (position is off)

The stackblitz is greatly simplified.

### Expected Behavior

The appropriate padding should be calculated so the submenu can be shown in the right place.

### Actual Behavior

The submenu is shown in the wrong place

### Environment

- Angular: 14.2.0
- CDK/Material: 14.2.0
- Browser(s): Google Chrome 108.0.5359.95
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

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à kiểm tra logic định vị menu con, đặc biệt là phép tính padding dựa trên offset của mục đầu tiên và collection `_items`. So sánh hành vi với commit 44293522e98bbd975e5fba2551421af32631f2de và xác minh rằng các mục được tạo thông qua `ngTemplateOutlet` tạo ra vị trí menu con như mong đợi và padding 8px.

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ó
4/5
Thời gian dự kiến
3-5 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.