diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts index 0090c27d334..e1803cc09da 100644 --- a/src/lib/menu/menu-directive.ts +++ b/src/lib/menu/menu-directive.ts @@ -196,15 +196,25 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnI */ @Input('class') set panelClass(classes: string) { + const previousPanelClass = this._previousPanelClass; + + if (previousPanelClass && previousPanelClass.length) { + previousPanelClass.split(' ').forEach((className: string) => { + this._classList[className] = false; + }); + } + + this._previousPanelClass = classes; + if (classes && classes.length) { - this._classList = classes.split(' ').reduce((obj: any, className: string) => { - obj[className] = true; - return obj; - }, {}); + classes.split(' ').forEach((className: string) => { + this._classList[className] = true; + }); this._elementRef.nativeElement.className = ''; } } + private _previousPanelClass: string; /** * This method takes classes set on the host mat-menu element and applies them on the diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index 3e0b5953576..ae13b56e76f 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -384,6 +384,7 @@ describe('MatMenu', () => { it('should transfer any custom classes from the host to the overlay', () => { const fixture = createComponent(SimpleMenu, [], [FakeIcon]); + fixture.componentInstance.panelClass = 'custom-one custom-two'; fixture.detectChanges(); fixture.componentInstance.trigger.openMenu(); fixture.detectChanges(); @@ -398,6 +399,28 @@ describe('MatMenu', () => { expect(panel.classList).toContain('custom-two'); }); + it('should not remove mat-elevation class from overlay when panelClass is changed', () => { + const fixture = createComponent(SimpleMenu, [], [FakeIcon]); + + fixture.componentInstance.panelClass = 'custom-one'; + fixture.detectChanges(); + fixture.componentInstance.trigger.openMenu(); + fixture.detectChanges(); + + const panel = overlayContainerElement.querySelector('.mat-menu-panel')!; + + expect(panel.classList).toContain('custom-one'); + expect(panel.classList).toContain('mat-elevation-z4'); + + fixture.componentInstance.panelClass = 'custom-two'; + fixture.detectChanges(); + + expect(panel.classList).not.toContain('custom-one'); + expect(panel.classList).toContain('custom-two'); + expect(panel.classList) + .toContain('mat-elevation-z4', 'Expected mat-elevation-z4 not to be removed'); + }); + it('should set the "menu" role on the overlay panel', () => { const fixture = createComponent(SimpleMenu, [], [FakeIcon]); fixture.detectChanges(); @@ -1858,7 +1881,7 @@ describe('MatMenu default overrides', () => { @@ -1880,6 +1903,7 @@ class SimpleMenu { extraItems: string[] = []; closeCallback = jasmine.createSpy('menu closed callback'); backdropClass: string; + panelClass: string; } @Component({