angular - 搜索字段失去焦点

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