Question

我已阅读How to prevent angular material mat-menu from closing?，其中介绍了如何防止Angular素材资源菜单在点击时关闭。

然而：当我按制表机来改变焦点时，我似乎找不到阻止mat菜单关闭的方法。

以StackBlitz为例：https://stackblitz.com/edit/angular-ij6jbx：它可以正确阻止mat-menu关闭输入字段通过鼠标点击获得焦点。另一方面：如果我按“制表符”来改变焦点，username - 输入字段会收到焦点，菜单就会关闭。

我想知道如何防止这种行为 - 如果可能的话。我尝试将$event.stopPropagation();附加到(input)，但它似乎没有做任何事情。

根据https://github.com/angular/material2/issues/2612，Angular开发人员显然已经想到了这一点。遗憾的是，在问题/功能请求结束时似乎没有适当的解决方案，也没有关于状态的提示。

P.s。：我知道，目前的代码不漂亮也不聪明。一旦它同时适用于点击和按键，我就会将其重构为自己的指令。

Answer 1

我会抓住keydown事件如下：

<mat-menu ...>
  <form (keydown.tab)="$event.stopPropagation()">

<强> Forked Stackblitz

此外，我会将tabindex="-1"添加到所有清除按钮

如何防止Angular / material mat-menu关闭键导航（tab）？

1 个答案: