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

发布时间：2020-12-17 07:11:41 所属栏目：安全来源：网络整理

导读：我已经阅读了 How to prevent angular material mat-menu from closing?,它解释了如何防止Angular材质mat-menu关闭点击. 但是：当我按Tabater更改焦点时,我似乎找不到阻止mat菜单关闭的方法. 以StackBlitz为例：https://stackblitz.com/edit/angular-ij6jbx

我已经阅读了 How to prevent angular material mat-menu from closing?,它解释了如何防止Angular材质mat-menu关闭点击.

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

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

我想知道如何防止这种行为 – 如果可能的话.我尝试附上$event.stopPropagation();到(输入),但它似乎没有做任何事情.

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

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

解决方法

我会抓住keydown事件如下：

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

Forked Stackblitz

此外,我会将tabindex =“ – 1”添加到所有清除按钮

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!