Skip to content

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

Open

Description

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:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/scrollingarea: material/menu

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions