fix(menu): nested trigger staying highlighted after click

Prevents the sub-menu trigger from staying highlighted if the user clicks on it and moves away to another menu item.

Fixes #6838.

Author: crisbeto

src/lib/menu/menu-trigger.ts

@@ -413,6 +413,13 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
   _handleMousedown(event: MouseEvent): void {
     if (!isFakeMousedownFromScreenReader(event)) {
       this._openedByMouse = true;
+
+      // Since clicking on the trigger won't close the menu if it opens a sub-menu,
+      // we should prevent focus from moving onto it via click to avoid the
+      // highlight from lingering on the menu item.
+      if (this.triggersSubmenu) {
+        event.preventDefault();
+      }
     }
   }
 

src/lib/menu/menu.spec.ts

@@ -29,6 +29,7 @@ import {
   dispatchMouseEvent,
   dispatchEvent,
   createKeyboardEvent,
+  dispatchFakeEvent,
 } from '@angular/cdk/testing';
 
 
@@ -996,6 +997,15 @@ describe('MdMenu', () => {
       expect(overlay.querySelectorAll('.mat-menu-panel').length).toBe(0, 'Expected no open menus');
     }));
 
+    it('should prevent the default mousedown action if the menu item opens a sub-menu', () => {
+      compileTestComponent();
+      instance.rootTrigger.openMenu();
+      fixture.detectChanges();
+
+      const event = dispatchFakeEvent(overlay.querySelector('[md-menu-item]')!, 'mousedown');
+
+      expect(event.defaultPrevented).toBe(true);
+    });
 
   });