如何添加自定义输入选项以进行选择？

Question

我正在使用<mat-select>，我需要选项列表，其中最后一个选项是带有占位符Add your custom option 的文本输入。用户可以选择其中一个选项或单击最后一个选项（即输入）和文本自己的选项，一旦他发短信，他在选择之外单击并设置了用户发短信的值。

问题是当用户添加 push space 以添加空格时，下拉菜单关闭。

<select>
  <option value="option 1"> option 1 </option>
  <option value="option 2"> option 2 </option>
  <option> <input type="text" placeholder="own option" /></option>
</select>

Answer 1

添加$event.stopPropagation 就足够了。在下面的代码块中我使用了两次：

1. 在(click)事件上，所以当用户点击文本输入区域时，选择菜单不会关闭
2. 在(keydown) 事件上，mat-select 指令监听空格键并在收到时关闭菜单。

<mat-select>
  <mat-option *ngFor="let food of foods" [value]="food.value">
    {{ food.viewValue }}
  </mat-option>
  <mat-option>
    <input
      type="text"
      placeholder="Add your custom option"
      (click)="$event.stopPropagation()"
      (keydown)="$event.stopPropagation()"
    />
  </mat-option>
</mat-select>