Непоследовательное поведение при выборе вкладок в mat-input

Question

Я использую набор элементов управления вводом Материала, и я не совсем понимаю логи выбора c, когда пользователь попадает в элемент управления. В некоторых случаях я получаю все значение выбранного поля, в других случаях курсор располагается слева от существующего ввода.

См. Примеры ниже:

Пример 1 курсор устанавливается после последнего символа существующего значения:

Пример 2 - выбрано целое значение ..

Как мне контролировать это поведение? Если в поле ввода есть существующее значение, я бы хотел, чтобы все это было выбрано, поэтому, если пользователь хочет изменить его, он может просто начать печатать.

Вот html для элемента ввода:

<mat-form-field class="input-cell" [ngClass]='inputClass'
   *ngIf="rowFocus && (inputType==InputTypeEnum.textInput  || inputType==InputTypeEnum.numberInput || inputType==InputTypeEnum.percentInput)">

   <mat-label>{{fieldName}}</mat-label>

   <input matInput placeHolder="placeholder" [(ngModel)]="value" (focus)="gotFocus()" (click)="inputClick($event)"
   [disabled]="readOnly"
      (blur)="lostFocus($event)" [errorStateMatcher]="matcher" #cellInput
      (keydown)="keyDown($event)"
       >
   <mat-error>{{errorText}}</mat-error>
</mat-form-field>

Answer 1

Мне удалось это исправить, вызвав select на HTMLElement в событии фокуса с задержкой, следующим образом:

Добавлен в компонент:

 @ViewChild('cellInput') inputElement: ElementRef; //refers to the input element

 gotFocus() {
  setTimeout(()=>{ this.inputElement.nativeElement.select();},100)
 }