如何解决TAB键聚焦mat-select组件时的键盘过滤异常问题？

问题根源 #

你手动添加tabindex导致组件异常，是因为Angular Material的mat-select自带完整的焦点管理逻辑，外部设置的tabindex会干扰组件原生的键盘交互链，引发焦点混乱、过滤失效等问题。

修复步骤 #

1. 移除自定义tabindex
   直接删掉输入框上手动添加的tabindex属性，恢复组件原生的焦点控制。

2. 面板打开时自动聚焦输入框
   借助mat-select的openedChange事件，在下拉面板展开后自动把焦点定位到过滤输入框，这样用户无需额外操作就能直接用键盘输入过滤：

• 模板部分：

  <mat-select [formControl]="toppings" multiple (openedChange)="onPanelOpened()">
    <mat-select-trigger>
      {{toppings.value ? toppings.value.join(', ') : '请选择'}}
    </mat-select-trigger>
    <div class="filter-container">
      <input #filterInput placeholder="过滤选项" (input)="filterToppings($event)">
    </div>
    <mat-option *ngFor="let topping of filteredToppings | async" [value]="topping">
      {{topping}}
    </mat-option>
  </mat-select>
  

• 组件类部分：

  import { ViewChild, ElementRef } from '@angular/core';
  import { FormControl } from '@angular/forms';
  import { Observable, of, startWith, map } from 'rxjs';
  
  export class SelectMultipleExample {
    @ViewChild('filterInput') filterInput!: ElementRef<HTMLInputElement>;
    toppings = new FormControl<string[]>([]);
    toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
    filteredToppings!: Observable<string[]>;
  
    ngOnInit() {
      this.filteredToppings = this.toppings.valueChanges.pipe(
        startWith([]),
        map(value => this._filter(value))
      );
    }
  
    private _filter(value: string[]): string[] {
      const filterValue = value.join('').toLowerCase();
      return this.toppingList.filter(topping => topping.toLowerCase().includes(filterValue));
    }
  
    filterToppings(event: Event) {
      const filterValue = (event.target as HTMLInputElement).value.toLowerCase();
      this.filteredToppings = of(this.toppingList.filter(topping => topping.toLowerCase().includes(filterValue)));
    }
  
    onPanelOpened() {
      // 用setTimeout确保面板完全渲染后再聚焦
      setTimeout(() => {
        this.filterInput.nativeElement.focus();
      });
    }
  }
  

3. 优化键盘交互（可选）
   如果需要避免ESC键直接关闭面板，或者处理其他按键行为，可以给输入框添加事件阻止冒泡：

<input #filterInput placeholder="过滤选项" (input)="filterToppings($event)" (keydown.esc)="$event.stopPropagation()">

核心逻辑说明 #

Angular Material组件的无障碍交互是预设好的，手动修改tabindex会破坏内部的焦点流转逻辑。通过组件自带的openedChange事件触发聚焦，既能满足键盘过滤的需求，又不会干扰组件原生的交互行为。

内容的提问来源于stack exchange，提问作者tylkonachwile