Description
Bug, feature request, or proposal:
Bug: When using onPush strategy, in nested menus, the parent is left focused after click even after mouse is not hovering anymore and its submenu is closed.
What is the expected behavior?
Items should be only focused when their submenu is open.
What is the current behavior?
In the following gif, I first hover over items and submenus open and close normally. Then I click on Item 2, and hover on Item 3. Item 2 is left focused even if the submenu has been closed (after mouseleave). Same thing is visible for Item 3: when clicked, it stays focused until another item is clicked.
What are the steps to reproduce?
The given plunkr template (https://goo.gl/DlHd6U) did not load but instead was giving me some 404 errors for steppers (any idea why?). But it's easy to reproduce with this html AND using onPush in ts:
<button md-button [mdMenuTriggerFor]="menu">Trigger</button>
<md-menu #menu>
<div md-menu-item>Item 1</div>
<div md-menu-item [mdMenuTriggerFor]="submenu1">Item 2</div>
<div md-menu-item [mdMenuTriggerFor]="submenu2">Item 3</div>
</md-menu>
<md-menu #submenu1>
<div md-menu-item>SubItem 1</div>
<div md-menu-item>SubItem 2</div>
<div md-menu-item>SubItem 3</div>
</md-menu>
<md-menu #submenu2>
<div md-menu-item>SubItem 4</div>
<div md-menu-item>SubItem 5</div>
<div md-menu-item>SubItem 6</div>
</md-menu>
@Component({
...
changeDetection: ChangeDetectionStrategy.OnPush
})
What is the use-case or motivation for changing an existing behavior?
This is a bug and should be fixed, imho.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
"@angular/cdk": "2.0.0-beta.10",
"@angular/common": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/material": "2.0.0-beta.10",
"typescript": "2.4.2"
Tested with Chrome 60 on Linux.