fix(menu): not closing sibling sub-menus when hovering over disabled items

* Fixes sub-menus not being closed when the user hovers over a disabled sibling menu item.
* Fixes the sub-menu arrow not being greyed out for disabled items.

Author: crisbeto

src/lib/menu/_menu-theme.scss

@@ -16,7 +16,9 @@
     color: mat-color($foreground, 'text');
 
     &[disabled] {
-      color: mat-color($foreground, 'disabled');
+      &, &::after {
+        color: mat-color($foreground, 'disabled');
+      }
     }
   }
 

src/lib/menu/menu-item.ts

@@ -122,9 +122,7 @@ export class MatMenuItem extends _MatMenuItemMixinBase
 
   /** Emits to the hover stream. */
   _emitHoverEvent() {
-    if (!this.disabled) {
-      this._hovered.next(this);
-    }
+    this._hovered.next(this);
   }
 
   /** Gets the label to be used when determining whether the option should be focused. */

src/lib/menu/menu-trigger.ts

@@ -163,7 +163,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
     if (this.triggersSubmenu()) {
       // Subscribe to changes in the hovered item in order to toggle the panel.
       this._hoverSubscription = this._parentMenu._hovered()
-          .pipe(filter(active => active === this._menuItemInstance))
+          .pipe(filter(active => active === this._menuItemInstance && !active.disabled))
           .subscribe(() => {
             this._openedByMouse = true;
             this.openMenu();

src/lib/menu/menu.spec.ts

@@ -932,6 +932,60 @@ describe('MatMenu', () => {
             .toBe(1, 'Expected one open menu');
       }));
 
+      it('should close submenu when hovering over disabled sibling item', fakeAsync(() => {
+        compileTestComponent();
+        instance.rootTriggerEl.nativeElement.click();
+        fixture.detectChanges();
+        tick(500);
+
+        const items = fixture.debugElement.queryAll(By.directive(MatMenuItem));
+
+        dispatchFakeEvent(items[0].nativeElement, 'mouseenter');
+        fixture.detectChanges();
+        tick(500);
+
+        expect(overlay.querySelectorAll('.mat-menu-panel').length)
+            .toBe(2, 'Expected two open menus');
+
+        items[1].componentInstance.disabled = true;
+        fixture.detectChanges();
+
+        // Note that we use `dispatchFakeEvent`, rather that `dispatchMouseEvent`, because the
+        // fake mouse events aren't being dispatched for disabled elements, whereas the
+        // native ones are.
+        dispatchFakeEvent(items[1].nativeElement, 'mouseenter');
+        fixture.detectChanges();
+        tick(500);
+
+        expect(overlay.querySelectorAll('.mat-menu-panel').length)
+            .toBe(1, 'Expected one open menu');
+      }));
+
+    it('should not open submenu when hovering over disabled trigger', fakeAsync(() => {
+      compileTestComponent();
+      instance.rootTriggerEl.nativeElement.click();
+      fixture.detectChanges();
+      tick(500);
+
+      expect(overlay.querySelectorAll('.mat-menu-panel').length)
+          .toBe(1, 'Expected one open menu');
+
+      const item = fixture.debugElement.query(By.directive(MatMenuItem));
+
+      // Note that we use `dispatchFakeEvent`, rather that `dispatchMouseEvent`, because the
+      // fake mouse events aren't being dispatched for disabled elements, whereas the
+      // native ones are.
+      item.componentInstance.disabled = true;
+      fixture.detectChanges();
+      dispatchFakeEvent(item.nativeElement, 'mouseenter');
+      fixture.detectChanges();
+      tick(500);
+
+      expect(overlay.querySelectorAll('.mat-menu-panel').length)
+          .toBe(1, 'Expected to remain at one open menu');
+    }));
+
+
     it('should open a nested menu when its trigger is clicked', () => {
       compileTestComponent();
       instance.rootTriggerEl.nativeElement.click();