Material Angular 会自动聚焦在第一个按钮上，直到我单击

Question

此表单字段中的第一个按钮始终自动聚焦 当我点击其他地方时它就消失了

          <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>

Answer 1

您可以通过两种方式解决此问题：

1. 您可以更改此行

   <form [formGroup]="addFundsForm">

   ：

   <form [formGroup]="addFundsForm" [autofocus]="false">

2. 您可以添加隐藏输入来捕获自动对焦行为，如下所示：

   <form [formGroup]="addFundsForm">
       <input type="text" style="display:none">
       <mat-form-field floatLabel="always" class="h-[118px] w-[199px]" appearance="outline">
         <mat-label>Amount</mat-label>
         .......
   </form>