md-sidenav mode="over" focus state

[robisim74]

Bug, feature request, or proposal:

The base path remains in active state when you select another link and you close and reopen the sidenav, only in mode="over". Need an event, like a click, to deactivate it.

What is the expected behavior?

It has worked fine up to 2.0.0-alpha.10

What is the current behavior?

What are the steps to reproduce?

http://plnkr.co/edit/R9p0F7

Which versions of Angular, Material, OS, browsers are affected?

Material 2.0.0-alpha.11-xx, in all browsers.

Is there anything else we should know?

I tried Angular workarounds (routerLinkActive) without success.

Thanks

[robisim74]

Same problem with Material 2.0.0-beta.X, except in Firefox.

Now after closing the sidenav, also the md-icon of menu remains in active state:

[jelbourn]

@mmalerba re: focus state

[PostImpatica]

@robisim74 wanna hear something really weird regarding that icon? I have the same issue, it stays active after use, but what's even more strange is I've found that certain <div *ngIf="bool">hi</div> elements won't show after changing value of bool to true until I hover over this same icon. Then they magically appear. Other md-button and similar elements on the page don't have this same magical affect, only that menu button.

[robisim74]

@helzgate I didn't have time to investigate.

[robisim74]

@jelbourn @mmalerba The error on base path and on icon is still present in v2.0.0-beta.2

[mmalerba]

@robisim74 Can you provide a more detailed set of repro steps and description of what the problem is. I updated your plunker to work with the latest material version: http://plnkr.co/edit/IvLXYMiAHqr8mbmT9cGB?p=preview

Everything appears to be working correctly? Are you referring to the focus outline that appears around the "Home" link when you open the sidenav?

[robisim74]

Hi @mmalerba,

yes, the focus is always on the base path Home:

Steps:

• I open the menu
• I click on Resources
• I close the menu
• I reopen the menu: the focus is on Home (blue border & grey background)

You can see this behavior also in the official Angular Material site:

Instead, the icon's focus was solved by version beta.3.

Thanks

[mmalerba]

I see, I'm not sure which is the correct item to focus from an accessibility standpoint (the first one or the current one) - I will look into that. The outline seems like a bug, you can fix it for now by adding this to your CSS:

.mat-list-item { outline: none; }

[robisim74]

In my opinion always the current one, according to routerLinkActive. Thanks for the tip.
Greetings,
Roberto