如何防止 Angular/Material mat-menu 在键导航（选项卡）时关闭？

Question

我已阅读如何防止角材料垫菜单关闭？ ，其中解释了如何防止 Angular 材质垫菜单在单击时关闭。

但是：当我按 tabulator 更改 focus 时，我似乎无法找到一种方法来防止 mat-menu 关闭。

以这个 StackBlitz 为例： https ://stackblitz.com/edit/angular-ij6jbx ：当输入字段通过鼠标单击获得焦点时，它正确地防止了mat-menu关闭。 另一方面：如果我按“制表符”更改焦点并且username -input-field 接收焦点，则菜单关闭。

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

显然，Angular 开发人员根据https://github.com/angular/material2/issues/2612对此进行了一些思考。 可悲的是，在问题/功能请求结束时似乎没有适当的解决方案，也没有关于状态的提示。

Ps：我知道，目前的代码并不漂亮，也不智能。 一旦它适用于点击和按键，我将把它重构为它自己的指令。

Answer 1

您可以按如下方式捕获keydown事件：

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

分叉的堆栈闪电战

另外，我会向所有清除按钮添加tabindex="-1"