[Bug] Mat Menu does not open.

[Gabb1995]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Mat Menu opens

What is the current behavior?

Mat Menu does not open

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

@angular-devkit/architect 0.8.6
@angular-devkit/build-angular 0.8.6
@angular-devkit/build-optimizer 0.8.6
@angular-devkit/build-webpack 0.8.6
@angular-devkit/core 0.8.6
@angular-devkit/schematics 0.8.6
@angular/cdk 6.4.7
@angular/cli 6.2.6
@angular/flex-layout 6.0.0-beta.18
@angular/material 6.4.7
@ngtools/webpack 6.2.6
@schematics/angular 0.8.6
@schematics/update 0.8.6
rxjs 6.3.3
typescript 2.9.2
webpack 4.22.0

Tested both in latest Firefox, and latest Chrome.

Is there anything else we should know?

Only started happening since I updated to 6.4.7 on cdk and material.
Code:

<button class="portal-user-menu-button" mat-button [matMenuTriggerFor]="userDetailsMenu">
  <img class="portal-user-menu-button__avatar" src="assets/images/layouts/avatar.png" alt="Moderator">
  <span class="portal-user-menu-button__username">{{username}}</span>
</button>
<mat-menu #userDetailsMenu="matMenu" classList="portal-menu-no-padding">
  <div class="portal-user-menu-header" fxLayout="row" fxLayoutAlign=" center">
    <img class="portal-user-menu-header__avatar" src="assets/images/layouts/avatar.png" alt="Moderator"/>
    <div class="portal-user-menu-header__details" fxLayout="column" fxLayoutAlign="center start">
      <h2>{{username}}</h2>
    </div>
  </div>
  <mat-nav-list class="portal-user-menu-list">
    <a mat-list-item (click)="logout()">
      <mat-icon matListIcon>exit_to_app</mat-icon>
      <span i18n>Sign Out</span>
    </a>
  </mat-nav-list>
</mat-menu>

Gif:

[Gabb1995]

I have tried the polyfills.ts fix but it didnt work, and also the lazy rendering and it didn't work either. Any suggestions on a quick fix would be great.

Quick fix was adding this:

.mat-menu-panel {
  opacity: 1 !important;
  transform: scale(1, 1) !important;
}

[Gabb1995]

It was another issue with js not compiling correctly.

[ildarnm]

I have the same behavior. Mat Menu does not open.

[few-bits]

It was another issue with js not compiling correctly.

@Gabb1995 , which one? What did you do to display matMenu on click?

[JethroWork]

I have the same problem.
After the check, my solution is to import the BrowserAnimationsModule.

app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

imports: [
BrowserModule,
AppRoutingModule
, MatButtonModule
, MatMenuModule
, MatIconModule
, BrowserAnimationsModule // Browser Animation, Must for pop-up menu
],

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}