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

Question

我已阅读如何防止角料素材菜单关闭？,它解释了如何防止Angular材质mat-menu关闭点击.

但是:当我按Tabater更改焦点时,我似乎找不到阻止mat菜单关闭的方法.

以StackBlitz为例:https://stackblitz.com/edit/angular-ij6jbx:当输入字段通过鼠标点击获得焦点时,它可以正确阻止mat-menu关闭.另一方面:如果按"制表符"更改焦点并且-input-field接收焦点,则菜单关闭.username

我想知道如何防止这种行为 - 如果可能的话.我试图连接$event.stopPropagation();到(input),但它似乎并没有做任何事情.

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

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

Answer 1

我会捕捉keydown如下事件：

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

分叉的Stackblitz

我也将添加tabindex="-1"到所有清除按钮