bug(Menu): Incorrect position of submenu while using ng-template
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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
コントリビューションガイド
調査の方向性
リンクされた StackBlitz の再現例から始め、メニューのサブメニューの位置決めロジックを調査します。特に、最初の項目のオフセットと `_items` コレクションに基づく padding の計算を確認してください。コミット 44293522e98bbd975e5fba2551421af32631f2de と動作を比較し、`ngTemplateOutlet` を通じて作成された項目が期待どおりのサブメニュー位置と 8px の padding を生成することを確認してください。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100