Material Angular表单首个按钮自动聚焦问题：点击后焦点消失

在使用Material Angular开发表单时，遇到以下问题：表单域内的第一个按钮会自动获得焦点，点击页面其他位置后焦点才会消失。

相关代码 #

<form [formGroup]="addFundsForm">
  <mat-form-field floatLabel="always" class="h-[118px] w-[199px]" appearance="outline">
    <mat-label>Amount</mat-label>
    <div class="flex justify-center items-center relative top-3">
      <div class="custom-input">{{customAmountCoin}}&nbsp;</div>
      <span class="text-gray-100 text-2xl font-semibold flex items-center">
        <svg></svg>
        <div>-Coins</div>
      </span>
    </div>
    <div class="flex relative top-1">
      <button mat-icon-button tabindex="0" (mousedown)="startDecrement()" (mouseup)="stopDecrement()" (mouseleave)="stopDecrement()">
        <div class="text-white">-</div>
      </button>
      <div class="flex items-center text-sm font-semibold text-primary-500">
        <input matInput style="color: #ea0a8e; font-size: 16px" formControlName="addFundsFormControl" type="number"
               class="text-center font-semibold text-primary-500">
      </div>
      <button mat-icon-button tabindex="1" (mousedown)="startIncrement()" (mouseup)="stopIncrement()" (mouseleave)="stopIncrement()">
        <div class="text-white">+</div>
      </button>
    </div>
  </mat-form-field>
</form>

解决方法 #

1. 调整 tabindex 控制聚焦优先级

Angular Material表单域默认会聚焦到第一个具有可交互tabindex的元素。当前第一个按钮的tabindex设为0，属于默认可聚焦优先级，所以被自动选中。可以通过修改tabindex调整：

• 给输入框设置tabindex="0"，让它成为第一个可聚焦元素
• 给两个按钮设置tabindex="-1"，让它们不参与自动聚焦（仍可通过点击触发事件）

修改后的代码片段：

<div class="flex relative top-1">
  <button mat-icon-button tabindex="-1" (mousedown)="startDecrement()" (mouseup)="stopDecrement()" (mouseleave)="stopDecrement()">
    <div class="text-white">-</div>
  </button>
  <div class="flex items-center text-sm font-semibold text-primary-500">
    <input matInput style="color: #ea0a8e; font-size: 16px" formControlName="addFundsFormControl" type="number"
           class="text-center font-semibold text-primary-500" tabindex="0">
  </div>
  <button mat-icon-button tabindex="-1" (mousedown)="startIncrement()" (mouseup)="stopIncrement()" (mouseleave)="stopIncrement()">
    <div class="text-white">+</div>
  </button>
</div>

2. 手动控制输入框聚焦

在组件视图初始化完成后，主动让输入框获得焦点，覆盖默认的自动聚焦行为：

组件代码：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatInput } from '@angular/material/input';

@Component({
  // 你的组件元数据（如selector、templateUrl等）
})
export class YourComponent implements AfterViewInit {
  @ViewChild('amountInput') amountInput!: MatInput;

  ngAfterViewInit() {
    this.amountInput.focus();
  }
}

模板中给输入框添加模板引用变量：

<input #amountInput matInput style="color: #ea0a8e; font-size: 16px" formControlName="addFundsFormControl" type="number"
       class="text-center font-semibold text-primary-500">

3. 手动移除按钮焦点

在组件加载完成后，找到自动聚焦的按钮并移除焦点：

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

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    const decrementBtn = this.el.nativeElement.querySelector('button[mat-icon-button]:first-of-type');
    if (decrementBtn) {
      decrementBtn.blur();
    }
  }
}

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