Question

我正在使用Angular 2 Material，我在sidenav组件中导航时出现问题。每当我打开sidenav时，它会自动将焦点设置到第一个md-button项目，并且在我点击屏幕上的某个位置之前不会消失。

这是一个例子：https://plnkr.co/edit/pNv9Bx4o1qQSF2bpOqyM?p=preview

我尝试将focus()设置为sidenav.open()事件上的另一个元素，但会出现闪烁效果一秒钟。

是否有任何选项或属性可以将此初始焦点禁用到第一个菜单项？

Answer 1

此问题自github issue起已解决

您可以将false传递给autoFocus属性：

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

Answer 2

编辑这已在材料库中解决，请参阅@Smiter的答案。

因此，在md-sidenav时，这似乎是mode='side'的错误。在GitHub上打开了一些问题（OP，我看到你提交了自己的问题;很好的工作）。玩弄它，似乎它实际上与锚标签上的md-button指令有关。只要<a>仍然存在，用<button>替换md-button标签也无法解决问题。作为进一步的证据，从第一个md-button标记中删除<a>会导致第二个列表项（带有md-button的第一个元素）以这种方式突出显示自己。

无论如何，我认为解决这个问题的最佳方法是在我们收到Angular团队的消息之前采取一种解决方法。我能够通过在列表中首先添加一个md-button的隐藏列表项来修复该行为：

  <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>

请注意，我们无法在虚拟元素上设置display: none;该指令会忽略它。只需使用height: 0或类似的东西。我还设置了position: absolute，因此它没有弄乱其他元素的位置。

编辑：这是问题所在。根据一位合作者的说法，这是按预期工作的？请注意 - 如果确实如此，则需要将其作为功能请求提交，因为这会让用户感到困惑。 https://github.com/angular/material2/issues/3215

Angular 2材质：sidenav专注于第一个导航项

2 个答案: