在Material2中打开mat菜单时使用mat-input

Question

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

这个是可能的吗？

<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();
}

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

EDIT:正如Jakub在评论中所说，您还可以跳过函数创建，直接从模板中调用stopPropagation方法

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

Answer 2

据我所知，你想让你的输入超出mat菜单，在较低的级别，同时有mat菜单打开不同的颜色选项作为参考。如果不是这样，您应该将mat-form-field标记放在mat-menu标记内，如上所述。唯一的问题是，我不明白为什么你必须阻止mat-menu关闭而专注于输入，因为这在我身上从来没有发生过，只有在你有输入的情况下才会关闭菜单，在这种情况下，你必须捕捉keydown事件并防止它，还有防止ESC键的问题...但如果你想要的是菜单打开并能够在较低级别的输入上写入内容，你必须做的是禁用mat-menu的背景。你可以像这样在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>

如果你仍然想让它在顶层--这要困难得多(你需要在内部层开始允许和阻止事件)。