From 93a21c7e0a292bf50f6274483cfe58b455ee8142 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 8 Jun 2017 23:32:47 +0200
Subject: [PATCH] fix(menu): remove classes from inert element (#4800)

Removes the classes from the inert `md-menu` element, after they're transferred to the menu panel.

Fixes #4484.
---
 src/lib/menu/menu-directive.ts | 17 ++++++++++++-----
 src/lib/menu/menu.spec.ts      | 18 +++++++++++++++++-
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts
index e4edc8d6e801..fd5991726eb2 100644
--- a/src/lib/menu/menu-directive.ts
+++ b/src/lib/menu/menu-directive.ts
@@ -12,6 +12,7 @@ import {
   TemplateRef,
   ViewChild,
   ViewEncapsulation,
+  ElementRef,
 } from '@angular/core';
 import {MenuPositionX, MenuPositionY} from './menu-positions';
 import {throwMdMenuInvalidPositionX, throwMdMenuInvalidPositionY} from './menu-errors';
@@ -85,16 +86,22 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
    */
   @Input('class')
   set classList(classes: string) {
-    this._classList = classes.split(' ').reduce((obj: any, className: string) => {
-      obj[className] = true;
-      return obj;
-    }, {});
-    this.setPositionClasses();
+    if (classes && classes.length) {
+      this._classList = classes.split(' ').reduce((obj: any, className: string) => {
+        obj[className] = true;
+        return obj;
+      }, {});
+
+      this._elementRef.nativeElement.className = '';
+      this.setPositionClasses();
+    }
   }
 
   /** Event emitted when the menu is closed. */
   @Output() close = new EventEmitter<void>();
 
+  constructor(private _elementRef: ElementRef) { }
+
   ngAfterContentInit() {
     this._keyManager = new FocusKeyManager(this.items).withWrap();
     this._tabSubscription = this._keyManager.tabOut.subscribe(() => this._emitCloseEvent());
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index 18e327753363..de9cabf903c4 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/src/lib/menu/menu.spec.ts
@@ -118,6 +118,22 @@ describe('MdMenu', () => {
     expect(overlayPane.getAttribute('dir')).toEqual('rtl');
   });
 
+  it('should transfer any custom classes from the host to the overlay', () => {
+    const fixture = TestBed.createComponent(SimpleMenu);
+
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+
+    const menuEl = fixture.debugElement.query(By.css('md-menu')).nativeElement;
+    const panel = overlayContainerElement.querySelector('.mat-menu-panel');
+
+    expect(menuEl.classList).not.toContain('custom-one');
+    expect(menuEl.classList).not.toContain('custom-two');
+
+    expect(panel.classList).toContain('custom-one');
+    expect(panel.classList).toContain('custom-two');
+  });
+
   describe('positions', () => {
     let fixture: ComponentFixture<PositionedMenu>;
     let panel: HTMLElement;
@@ -462,7 +478,7 @@ describe('MdMenu', () => {
 @Component({
   template: `
     <button [mdMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
-    <md-menu #menu="mdMenu" (close)="closeCallback()">
+    <md-menu class="custom-one custom-two" #menu="mdMenu" (close)="closeCallback()">
       <button md-menu-item> Item </button>
       <button md-menu-item disabled> Disabled </button>
     </md-menu>