如何在md菜单项中具有输入框

Question

我希望有一个选项可以将一个项目添加到现有列表或创建一个新项目；类似于youtube的“添加到播放列表”。有以下几种工作，但是一旦将焦点放在输入框上，菜单就会消失。有没有一种方法可以在单击菜单中的一项时禁用关闭菜单？

环境是Angular 2 /材质2。

    <button md-raised-button  [mdMenuTriggerFor]="menu">Add To</button>
    <md-menu #menu="mdMenu">
      <button md-menu-item>Item 1</button>
      <button md-menu-item>Item 2</button>
      <md-input-container class="mx-4">
        <input mdInput placeholder="Create new" value="">
      </md-input-container>
    </md-menu>

Answer 1

您可以通过停止中的click事件传播来做到这一点<md-input-container>。

的HTML：

<md-input-container class="mx-4" (click)="stopPropagation($event)">

ts：

stopPropagation(event){
  event.stopPropagation();
  // console.log("Clicked!");
}

朋克演示