如何让mat-select autocomplete搜索框在点击列表时自动获焦？

我来帮你搞定这个焦点定位的问题，核心是要精准找到组件内部的搜索输入框元素，并且在下拉面板完全渲染完成后再设置焦点。下面分步骤实现：

步骤1：更新ViewChild引用 #

首先要获取组件的原生DOM元素引用，这样才能查询到内部的搜索框。修改你的ViewChild声明：

import { ElementRef, ViewChild } from '@angular/core';
// ...其他必要导入

@ViewChild(SelectAutocompleteComponent, { read: ElementRef }) multiSelect!: ElementRef;

步骤2：改用组件的opened事件（替代click） #

原有的click事件可能在下拉面板还没渲染好就触发了，导致找不到搜索框。这个组件提供了opened输出事件，当下拉面板完全打开时才会触发，用它来处理焦点逻辑更可靠：

<mat-select-autocomplete 
  appearance="outline" 
  name="myList" 
  [required]='true' 
  [placeholder]="'Select item(s):'" 
  [options]="itemList" 
  [multiple]='true' 
  [display]="'displayName'" 
  [value]="'value'" 
  [selectedOptions]="itemValues" 
  (selectionChange)="getList($event)" 
  (opened)="onDropdownOpened()"> <!-- 替换click为opened事件 -->
</mat-select-autocomplete>

步骤3：实现焦点设置逻辑 #

在组件类中添加onDropdownOpened方法，定位到内部搜索框并设置焦点，同时自动滚动到列表顶部：

onDropdownOpened() {
  // 通过组件原生元素查询内部的搜索输入框，用类名匹配更精准
  const searchInput = this.multiSelect.nativeElement.querySelector('.mat-select-autocomplete-search-input');
  
  if (searchInput) {
    // 给搜索框设置焦点
    searchInput.focus();
    // 自动滚动到搜索框位置，长列表下也能直接看到搜索区域
    searchInput.scrollIntoView({ block: 'start', behavior: 'smooth' });
  }
}

为什么之前的方法无效？ #

你之前尝试设置innerControl.focused = true没效果，是因为selectElem指向的是整个选择组件的容器，而非内部的搜索输入框。我们需要精准定位到用于搜索的<input>元素，并且要确保在它已经渲染完成后再调用focus()方法。

如果你的组件版本中搜索框没有mat-select-autocomplete-search-input这个类名，也可以用querySelector('input')来匹配，不过类名匹配的方式更不容易出错。

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