mat-menu hides immediately on opening

Bug, feature request, or proposal:

Bug

What is the expected behavior?

mat-menu should stay opened after clicking activating button

What is the current behavior?

menu opens and closes (hides) instantly, keeping overlay active. User must click outside of area that should be covered with menu to deactivate overlay. After that menu opens normally, as it should.

After inspection in chrome developer tools:

Menu is constructed but has styles:

opacity: 0;
transform: scale(0.01, 0.01);

After removing styles , menu shows.

Reverting to version 5.2.4 fixes problem

Problem exists at versions:

• 6.0.2
• 6.0.1
• 6.0.0

Similar issue: https://github.com/angular/material2/issues/10212 https://github.com/angular/material2/issues/11366

What are the steps to reproduce?

//component.html
<div *ngIf="someBoolean">
    <button mat-icon-button [matMenuTriggerFor]="appMenu">
           <mat-icon>more_vert</mat-icon>
    </button>
</div>
<mat-menu #appMenu="matMenu">
             <button mat-menu-item><mat-icon>visibility</mat-icon>Change visibility</button>
            <mat-divider></mat-divider>
            <button mat-menu-item><mat-icon>delete_forever</mat-icon>Delete</button>
</mat-menu>

//component.ts
ngOnInit() {
        
        this.someObservable.pipe(
            take(1),
        ).subscribe((s) => {
            this.someBoolean = true;
            this.change.detectChanges();
        });
}

When variable change and detectChanges() is wrapped inside ngZone, problem disappears.

Fix:

    this.someObservable.pipe(
            take(1),
        ).subscribe((s) => {
           this.zone.run(() => {
                this.someBoolean = true;
                this.change.detectChanges();
           });
        });

What is the use-case or motivation for changing an existing behavior?

To work as predicted

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

user agent:

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

ng -v output:

Angular CLI: 6.0.3
Node: 10.1.0
OS: linux x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.13
@angular-devkit/build-angular     0.5.13
@angular-devkit/build-optimizer   0.5.13
@angular-devkit/core              0.5.13
@angular-devkit/schematics        0.6.3
@angular/cdk                      6.0.2
@angular/cli                      6.0.3
@angular/flex-layout              6.0.0-beta.15
@angular/material                 6.0.2
@ngtools/webpack                  6.0.0-rc.11
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Is there anything else we should know?

no

[bluecaret]

@kdcro101 Yes wrapping it inside ngZone.run makes it work for me without the need for the polyfill, I don’t really understand the underlying issue here, but this made it work for me so I’m happy 👍

[kdcro101]

@bluecaret ,

I guess rxjs 6.* transition is work in progress. Does wrapping inside ngZone.run block helps?