搜索字段失去焦点

Question

我想创建一个搜索字段，为此我关注了this tutorial，它展示了如何创建和使用过滤管道。

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
      return it.toLowerCase().includes(searchText);
    });
   }
}

<mat-menu #accountsMenu="matMenu">
  <div (click)="$event.stopPropagation()">
    <mat-form-field>
      <span matPrefix><mat-icon>search</mat-icon></span>
      <input
        matInput
        [formControl]="accountSearch"
        placeholder="search text goes here"
      />
    </mat-form-field>
    <button
      *ngFor="let c of accounts | arrayFilter: accountSearch.value"
      mat-menu-item
      (click)="selectAccount(c)"
    >
      {{ c.Name }}
    </button>
  </div>
</mat-menu>
<div
  [matMenuTriggerFor]="accountsMenu"
>
  Click to show menu
</div>

过滤有效，但搜索字段失去焦点。我尝试使用 trackBy，因为它是由一些消息来源建议的，但它对我不起作用。

更新：我发现当我从按钮中删除“mat-menu-item”时，输入不会失去焦点，但我需要它。我该怎么办？

更新 2：可复制问题here

Answer 1

您能否提供一个代码示例来重现问题？

我已按照教程的说明进行操作，一切似乎都正常。

检查工作示例HERE

更新：

问题出在

<button mat-menu-item...

在按钮上使用 ma​​t-input-item 属性时，焦点输入字段出现问题。

如果您将 ma​​t-input-item 替换为 ma​​t-button，从现在开始焦点将保持不变。

更新示例 here