如何阻止点击mat-select/mat-chip-list时mat-form-field内input获焦

方法1：阻止mat-select的事件冒泡 #

点击mat-select时，事件会冒泡到父级mat-form-field，触发其默认的焦点切换逻辑。可以通过阻止事件传播解决：

将mat-select的(click)事件替换为(mousedown)（焦点获取通常在mousedown阶段触发，阻止该阶段冒泡更有效），并添加$event.stopPropagation()：

<mat-select matPrefix class="cs-matselectfield"
    [ngClass]="{'cs-matselect-operator':sectionObjectInfo['filterSectionDetail']['filterFields']['pfm138993_name_23']['conditionalOperator']}"
    [(value)]="sectionObjectInfo['filterSectionDetail']['filterFields']['pfm138993_name_23']['conditionalOperator']"
    (mousedown)="cspfmListFilter.operatorStyle(); $event.stopPropagation()">
    <!-- mat-option内容保持不变 -->
</mat-select>

方法2：手动控制input焦点逻辑 #

如果方法1无效，可通过组件类精准控制input的焦点状态：

1. 给input添加模板引用变量：

<input #filterInput id="FLD_institute_d_w_searchlist_institute_DUMMY$$name_input" matInput
    class="cs-lspad" type="text"
    [(ngModel)]="sectionObjectInfo['filterSectionDetail']['filterFields']['pfm138993_name_23']['fieldValue']">

2. 在组件类中监听点击事件，仅允许点击input本身时获焦：

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild('filterInput') filterInput!: ElementRef<HTMLInputElement>;

  ngAfterViewInit() {
    const formField = this.filterInput.nativeElement.closest('mat-form-field');
    if (formField) {
      formField.addEventListener('click', (e: MouseEvent) => {
        if (e.target !== this.filterInput.nativeElement) {
          e.stopPropagation();
          this.filterInput.nativeElement.blur();
        }
      });
    }
  }
}

方法3：调整mat-form-field结构 #

若前两种方法均不生效，可将mat-select移出mat-form-field，通过外层容器布局模拟原效果：

<div class="filter-field-wrapper">
  <mat-select class="cs-matselectfield"
      [ngClass]="{'cs-matselect-operator':sectionObjectInfo['filterSectionDetail']['filterFields']['pfm138993_name_23']['conditionalOperator']}"
      [(value)]="sectionObjectInfo['filterSectionDetail']['filterFields']['pfm138993_name_23']['conditionalOperator']"
      (click)="cspfmListFilter.operatorStyle()">
      <!-- mat-option内容保持不变 -->
  </mat-select>
  <mat-form-field [floatLabel]="'always'" appearance="none" class="cs-mat-labelset">
    <input id="FLD_institute_d_w_searchlist_institute_DUMMY$$name_input" matInput
        class="cs-lspad" type="text"
        [(ngModel)]="sectionObjectInfo['filterSectionDetail']['filterFields']['pfm138993_name_23']['fieldValue']">
    <mat-chip-list class="cs-mat-error">
      <mat-error>
          <span *ngIf="!sectionObjectInfo['filterSectionDetail']['filterFields']['pfm138993_name_23']['isValidField']">
                  {{this.sectionObjectInfo['filterSectionDetail']['filterFields']['pfm138993_name_23']['errorMessage']}}</span> 
      </mat-error>
    </mat-chip-list>
  </mat-form-field>
</div>

再通过CSS调整.filter-field-wrapper的布局，让select与form-field对齐，还原原有视觉效果。

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