Search code examples
cssangularangular-materialmaterialize

Material Angular has auto focus on first button until I click

The first button in this form field has always autofocus It disappears when I click somewhere else

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

Auto focus

Solution

  • You can solve this with two ways:

    1. You can change this line <form [formGroup]="addFundsForm"> with this: <form [formGroup]="addFundsForm" [autofocus]="false">

    2. You can add a hidden input to catch auto focus behaviour like this:

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