我正在使用 Angular 2 Material, 在侧边栏组件内有个导航问题。每次打开侧边栏时,焦点会自动集中在第一个 md-button
上,而且只有在屏幕上其他地方点击一下才能取消。
这是一个实例: https://plnkr.co/edit/pNv9Bx4o1qQSF2bpOqyM?p=preview
我尝试在 sidenav.open()
事件上将 focus()
设置到另一个元素上,但会出现闪烁效果。
是否有任何选项或属性可以禁用此初始聚焦到第一个菜单项的行为?
我正在使用 Angular 2 Material, 在侧边栏组件内有个导航问题。每次打开侧边栏时,焦点会自动集中在第一个 md-button
上,而且只有在屏幕上其他地方点击一下才能取消。
这是一个实例: https://plnkr.co/edit/pNv9Bx4o1qQSF2bpOqyM?p=preview
我尝试在 sidenav.open()
事件上将 focus()
设置到另一个元素上,但会出现闪烁效果。
是否有任何选项或属性可以禁用此初始聚焦到第一个菜单项的行为?
这个 Github issue 已经得到解决。
你可以将 autoFocus 属性设为 false:
<mat-sidenav [autoFocus]="false">
...
</mat-sidenav>
编辑 这个问题已在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>
onclick="this.blur()"