bug(cdk/scrolling): Virtual viewport not working correctly when using mat-menu
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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
The minimal reproduction of the bug shows that the viewport height is not correctly handled which leads to a lot of empty space within the viewport area since list items are not created properly. Also when scrolling through the list, closing and reopening the menu, the list is empty. Resizing the window solves all the problems. I currently got rid of the problems by creating a wrapper for the list and manually triggering the resize event if the component is visible:
```JS
constructor(public _eRef: ElementRef, private ngZone: NgZone) { }
ngAfterViewInit() {
this.observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.triggerResizeEvent();
}
});
});
this.observer.observe(this._eRef.nativeElement)
}
private triggerResizeEvent() {
this.ngZone.runOutsideAngular(() => {
window.dispatchEvent(new Event('resize'));
});
}
```
### Reproduction
StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-57cqqc?file=src%2Fapp%2Fviewport-error.component.html
Steps to reproduce:
1. open the mat-menu
2. the viewport is half empty
3. resize the window
4. viewport filled properly
Steps to reproduce:
1. open the mat-menu
2. scroll through list
3. close and reopen the menu
4. viewport empty
### Expected Behavior
The viewport should be completely filled with options
### Actual Behavior
The viewport is not fully filled. The list items are not created properly
### Environment
Angular CLI: 18.0.7
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64
Angular: 18.0.6
... animations, cdk, cdk-experimental, common, compiler
... compiler-cli, core, forms, material, platform-browser
... platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.7
@angular-devkit/build-angular 18.0.7
@angular-devkit/core 18.0.7
@angular-devkit/schematics 18.0.7
@angular/cli 18.0.7
@schematics/angular 18.0.7
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.7
コントリビューションガイド
調査の方向性
リンクされている StackBlitz の再現環境から始め、報告されている 2 つのケースを確認してください。mat-menu を開くと viewport に空のスペースが残り、スクロール後に再度開くと、resize が発生するまでリストが空のままになります。Angular CDK virtual scrolling と mat-menu の統合を追跡してください。完了条件は、手動で resize イベントをディスパッチしなくても、開いたときと再度開いたときに viewport が正しく埋まることです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100