How to use 2 inputs inside mat-form-field Angular Material with separately focus?

I have 2 inputs into one mat-form-field.



My issue is, when I click on second Input, the focus is automatically placed on the first input, I do not want to go to the first input. Could you please help me to solve this problem?

html file is:

<div class="range-mat-input" [class]="field.gridCssClass">
<label *ngIf="field.label">{{field.label}}</label>
<div class="input-part">
<mat-form-field class="double-input-field" [formGroup]="form">
<div class="inputs-container">
<span *ngIf="field.prefixLabelFrom">{{ field.prefixLabelFrom }}</span>
<input appAutocompleteOff matInput
formControlName="{{ field.key + '_from' }}"
[id]="field.key + '_from'"
[readonly]="field.readonly"
type="{{ field.type }}"
[class]="field.inputClass"
[min]="field.min"
[max]="field.max">

<span *ngIf="field.prefixLabelTo">{{ field.prefixLabelTo }}</span>
<span *ngIf="field.suffixLabelFrom">{{ field.suffixLabelFrom }}</span>

<input appAutocompleteOff matInput
formControlName="{{ field.key + '_to' }}"
[id]="field.key+ '_to'"
[readonly]="field.readonly"
type="{{field.type}}"
[class]="field.inputClass"
[min]="field.min"
[max]="field.max">

<span *ngIf="field.suffixLabelTo">{{ field.suffixLabelTo }}</span>
</div>


<ng-container *ngFor="let validation of field.validators;" ngProjectAs="mat-error">
<mat-error *ngIf="form.get(field.key)?.hasError(validation.name)">{{validation.message}}</mat-error>
</ng-container>

</mat-form-field>
</div>
</div>


I try to make one mat-form-field with 2 inputs and separately focus. But the focus goes only to first input by clicking on second Input. I expect to solve this issue.

Continue reading...