The primary button in this particular form field automatically gains focus upon loading the page, but it loses focus when I click elsewhere.
<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}} </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>