Angular 2 Material: sidenav focus on the first navigation item

Question

I am using Angular 2 Material and I have an issue with my navigation inside a sidenav component. Every time when I open the sidenav it automatically sets focus to the first md-button item and doesn't disappear until I click somewhere on the screen.

This is an example: https://plnkr.co/edit/pNv9Bx4o1qQSF2bpOqyM?p=preview

I tried to set focus() to another element on sidenav.open() event but a blinking effect appears for a second.

Is there any option or property that can disable this initial focus to the first menu item?

Answer 1

This has been resolved as of this github issue

You can just pass false to the autoFocus property:

<mat-sidenav [autoFocus]="false">
    ...
</mat-sidenav>

Answer 2

EDIT This has been resolved in the Material library, please see @Smiter's answer.

So, this does seem to be a bug with md-sidenav when mode='side'. There are a few issues open on GitHub (OP, I saw that you submitted your own as well; good work). Playing around with it, it seems that it's actually related to the md-button directive on the anchor tags. Replacing the <a> tags with <button>s also did not fix it as long as the md-button is still there. As further evidence, removing the md-button from the first <a> tag causes the second list item (the first element with an md-button) to highlight itself this way.

Anyway, I think the best way to fix this would be to shim in a workaround until we hear from the Angular team. I was able to fix the behavior by adding a invisible list item with a md-button first on the list:

  <md-sidenav #sidenav class="example-sidenav">

    <a md-button style="height: 0; position: absolute;"> <!-- 'absorbs' the behavior -->
    </a>  

    <md-list>

      <md-list-item>
        <a (click)="sidenav.close()" md-button>
          <md-icon>directions_car</md-icon>
        </a>
      </md-list-item>
      ......
    </md-list>
  </md-sidenav>

Note that we can't set display: none on the dummy element; the directive would ignore it. Just use height: 0 or something similar. I also set position: absolute so it didn't mess with the positioning of the other elements.

EDIT: Here's the issue. According to one collaborator this is working as intended? Keep an eye out - if that is true, this needs to be submitted as a feature request, because it's confusing to the user. https://github.com/angular/material2/issues/3215