angular / angular/components

bug(cdk/scrolling): Virtual viewport not working correctly when using mat-menu

Abierto
#29,395 1 comentario 0 reacciones 0 asignados Ver en GitHub
area: cdk/scrolling area: material/menu P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### 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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción vinculada de StackBlitz y verifica los dos casos reportados: al abrir el mat-menu queda espacio vacío en el viewport, y al volver a abrirlo después de desplazarte la lista permanece vacía hasta que se produce un redimensionamiento. Rastrea la integración de Angular CDK virtual scrolling y mat-menu; el trabajo estará terminado cuando el viewport se rellene correctamente al abrirlo y volver a abrirlo, sin despachar manualmente un evento de resize.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.