Skip to content

Nested menus bug: parent menu-item left focused after click (onPush) #6838

Closed
@RichieRock

Description

@RichieRock

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.

Behaviour

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions