Angular Material自动完成输入框选中与失焦事件竞态问题求解

在使用Angular Material的MatAutocomplete组件时，当同时监听optionSelected事件和输入框的blur事件时，会遇到一个棘手的问题：选中下拉选项时，blur事件也会被触发，这会干扰输入框的验证逻辑，导致业务逻辑混乱。

你的示例代码还原了这个问题：

模板代码 #

<form class="example-form"> 
  <mat-form-field class="example-full-width"> 
    <input type="text" placeholder="Pick one" aria-label="Number" matInput 
           (blur)="onBlur()" [formControl]="myControl" [matAutocomplete]="auto"> 
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="optionSelected()"> 
      <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option> 
    </mat-autocomplete> 
  </mat-form-field> 
</form>

组件类代码 #

@Component({ 
  selector: 'autocomplete-simple-example', 
  templateUrl: 'autocomplete-simple-example.html', 
  styleUrls: ['autocomplete-simple-example.css'], 
})
export class AutocompleteSimpleExample { 
  myControl = new FormControl(); 
  options: string[] = ['One', 'Two', 'Three']; 

  optionSelected(){ 
    console.log("option selected event, value: ", this.myControl.value); 
  } 

  onBlur(){ 
    console.log("Blur event, value:", this.myControl.value); 
  }
}

我遇到过不少开发者碰到这个问题，确实挺头疼的，尤其是影响到验证逻辑的时候。下面给你几个经过实践验证的可靠解决方案，还能保证事件顺序稳定：

方案一：通过mousedown阻止默认行为（最直接高效） #

问题的根源是：点击mat-option时，mousedown事件的默认行为会让输入框失焦，进而触发blur。我们只需要在选项上监听mousedown，阻止它的默认行为，就能避免输入框失焦。

修改模板中的mat-option：

<mat-option *ngFor="let option of options" [value]="option" 
            (mousedown)="$event.preventDefault()">
  {{option}}
</mat-option>

效果说明：

• 选中选项时，只会触发optionSelected事件，不会触发blur，完全避免冲突。
• 只有当用户点击输入框外部（非下拉选项区域）时，才会触发blur事件，符合预期逻辑。
• 事件顺序绝对稳定：mousedown（阻止默认）→ optionSelected，无blur干扰。

方案二：用标志位控制blur事件执行 #

如果因为某些原因不能修改mousedown事件，我们可以通过一个标志位来跳过选项选中时的blur逻辑。

修改组件类代码：

export class AutocompleteSimpleExample { 
  myControl = new FormControl(); 
  options: string[] = ['One', 'Two', 'Three']; 
  // 新增标志位
  private isOptionSelecting = false;

  optionSelected(){ 
    this.isOptionSelecting = true;
    console.log("option selected event, value: ", this.myControl.value); 
    // 在下一个事件循环重置标志位，确保后续正常blur能执行
    setTimeout(() => {
      this.isOptionSelecting = false;
    });
  } 

  onBlur(){ 
    // 如果是选中选项触发的blur，直接跳过
    if(this.isOptionSelecting){
      return;
    }
    console.log("Blur event, value:", this.myControl.value); 
  }
}

效果说明：

• 虽然实际事件触发顺序可能是blur先于optionSelected，但通过标志位的延迟重置，blur触发时会检测到isOptionSelecting为true，从而跳过执行。
• 后续用户正常点击外部失焦时，blur会正常执行，不影响原有逻辑。
• 逻辑上保证了选项选中时不会执行blur的业务代码，避免混乱。

方案三：用closed事件替代blur（适合特定业务场景） #

如果你的业务逻辑不需要严格监听输入框的失焦，而是关注下拉面板关闭后的操作，可以改用mat-autocomplete的closed事件，这个事件会在面板关闭时触发，包括选中选项关闭和点击外部关闭。

修改模板和组件类：

<mat-autocomplete #auto="matAutocomplete" 
                  (optionSelected)="optionSelected()"
                  (closed)="onPanelClosed()">
  <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
</mat-autocomplete>

export class AutocompleteSimpleExample { 
  // ... 原有代码

  onPanelClosed(){
    console.log("Panel closed, value:", this.myControl.value);
    // 这里执行原本blur事件中的验证或业务逻辑
  }
}

效果说明：

• 事件顺序稳定：optionSelected → closed，完全不会出现冲突。
• 覆盖了两种场景：选中选项关闭面板、点击外部关闭面板，能满足大多数需要在面板关闭后执行逻辑的需求。

关于事件顺序稳定性的说明 #

• 方案一和方案三能从根源上保证事件顺序符合预期，不会出现逻辑颠倒的情况。
• 方案二通过逻辑判断规避了冲突，虽然实际DOM事件顺序可能有先后，但业务逻辑的执行顺序是可控的，不会破坏深层输入逻辑。

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