在 Material2 中打开 mat-menu 时使用 mat-input

Question

当<mat-menu> 用于<mat-form-field> 时，它会从输入中获取焦点。我希望用户能够在打开菜单时使用输入。

这可能吗？

<mat-form-field appearance="outline" [matMenuTriggerFor]="appMenu">
  <mat-label>Label color</mat-label>
  <div class="color-container">
    <div class="color-dot" [style.backgroundColor]="label.color"></div>
  </div>
  <input #input matInput class="pl-2" [(ngModel)]="label.color">
</mat-form-field>


<mat-menu #appMenu="matMenu" yPosition="below" [overlapTrigger]="false">
  <mat-grid-list cols="8" rowHeight="30px">
    <mat-grid-tile *ngFor="let color of colors">
      <div mat-menu-item class="menu-item">
        <div class="color-dot" [style.backgroundColor]="color" 
                               (click)="label.color = color"></div>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</mat-menu>

stackblitz example

Answer 1

您可以通过添加轻松实现此目的

<mat-menu #myMenu="matMenu">
    <form (click)="stopPropagation($event)">
        <!-- Your content and inputs -->
    </form>
</mat-menu>

在你的组件中

stopPropagation(event){
    event.stopPropagation();
}

这将阻止事件传播，因此打开菜单的按钮不会收到“切换”触发器。

编辑：正如 Jakub 在 cmets 中所说，您也可以跳过函数创建并立即从模板中调用 stopPropagation 方法

  <form (click)="$event.stopPropagation()">

Answer 2

据我了解，您希望您的输入在垫子菜单之外，处于较低级别，同时打开垫子菜单并使用不同的颜色选项作为参考。如果不是这种情况，您应该将 mat-form-field 标签放在 mat-menu 标签内，如上所述。唯一的事情是我不明白为什么你必须阻止 mat-menu 关闭专注于输入，因为这从来没有发生在我身上，只有当你有输入时使用 tab 键关闭菜单，在这种情况下，您必须捕获 keydown 事件并阻止它，同时也阻止 ESC 键的问题...但是如果您想要的是打开菜单并能够在较低级别的输入上写入同时，您需要做的是禁用垫子菜单的背景。你可以像这样在html上制作它：

<mat-menu #myMenu="matMenu" [hasBackdrop]="false"></mat-menu>

Answer 3

如果您想在菜单打开时输入文本并假设您通过单击颜色项打开菜单（在其上添加光标指针） - 您需要将“matMenuTriggerFor”移动到较低级别的元素：

<div class="color-container" [matMenuTriggerFor]="appMenu">
    <div class="color-dot" [style.backgroundColor]="label.color"></div>
</div>

如果您仍然希望它处于顶层 - 这要困难得多（您需要在内部级别开始允许和阻止事件）。