Поле поиска теряет фокус

Question

Я хочу создать поле поиска, и для этого я следовал этому учебному пособию , в котором показано, как создавать и использовать канал фильтра.

@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: воспроизводимая проблема доступна здесь

Answer 1

Не могли бы вы предоставить нам пример кода для устранения проблемы?

Я следовал инструкциям руководства, и все, кажется, работает правильно.

Проверьте рабочий пример ЗДЕСЬ

ОБНОВЛЕНИЕ :

Проблема была в

<button mat-menu-item...

Возникла проблема в поле ввода фокуса при использовании Атрибут mat-input-item для кнопки.

Если вы замените mat-input-item на mat-button , фокус останется с этого момента .

Обновленный пример здесь