fix(menu): prevent removal of mat-elevation class (#15035)

Fixes a bug to prevent mat-elevation classes from being removed from menu panel after `MatMenu`'s `panelClass` input is updated

Author: swseverance

src/lib/menu/menu-directive.ts

@@ -196,15 +196,25 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, 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

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', () => {
     <button [matMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
     <mat-menu
       #menu="matMenu"
-      class="custom-one custom-two"
+      [class]="panelClass"
       (closed)="closeCallback($event)"
       [backdropClass]="backdropClass">
 
@@ -1880,6 +1903,7 @@ class SimpleMenu {
   extraItems: string[] = [];
   closeCallback = jasmine.createSpy('menu closed callback');
   backdropClass: string;
+  panelClass: string;
 }
 
 @Component({