bug(Menu): Incorrect position of submenu while using ng-template
- 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
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