Angular 2 Material: 侧边栏聚焦于第一个导航项

Question

我正在使用 Angular 2 Material, 在侧边栏组件内有个导航问题。每次打开侧边栏时，焦点会自动集中在第一个 md-button 上，而且只有在屏幕上其他地方点击一下才能取消。

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

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

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

- Hristo Eftimov

Answer 1

这个 Github issue 已经得到解决。

你可以将 autoFocus 属性设为 false：

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

- Smiter

---

对我来说完美运行，使用的是 @angular/cdk 7.1.1、@angular/cli 7.1.2和 @angular/material 7.1.1。 - Miguel Lara

哇...非常感谢！可以在Angular 9.x.x和Angular Material 9.2.x上使用。 - Tejashree

同样适用于 Angular 11.x.x。谢谢。 - umbe1987

这是一个简明的解决方案，同样适用于Angular 13.x.x。谢谢！ - Jason Young

Answer 2

编辑 这个问题已在Material库中解决，请参考@Smiter的回答。

所以，当mode='side'时，这确实似乎是md-sidenav的一个bug。在GitHub上有一些问题仍未解决（OP，我看到你也提交了自己的问题;做得好）。通过尝试，似乎它实际上与锚标记上的md-button指令相关。替换<a>标记为<button>也不能修复它，只要md-button仍然存在。作为更进一步的证据，从第一个<a>标记中删除md-button会导致第二个列表项（第一个具有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

- joh04667

---

是的，无高度解决方案修复了这个问题。我以为可能是我漏掉了什么，但肯定是一个错误。感谢您的支持，并希望这个错误很快会被修复 ;) - Hristo Eftimov

这个问题已经解决了，正如其他答案所述。使用那个方法，这个解决办法不再需要。 - ForestG

Answer 3

将此属性添加到聚焦的按钮：

onclick="this.blur()"

- ironsubhajit

---

欢迎来到SO！请不要发布仅包含代码的答案，而是添加一些文字说明您的方法如何运作以及它与其他给出答案的不同之处。您可以在我们的“如何撰写好答案”页面了解更多信息。 - ahuemmer