Ionic [Angular] - 反应形式：使用 setValue() selectionStart/End 后不会移动 cursor

Question

I want to make a responsive form with input handler that puts "." sign (via setValue()) at the end of the input field after keyboard input occurred. At the same time I want that after input occurred the cursor moves to the beginning of the input field and I use for that 'selectionStart/selectionEnd' properties of the input tag.

If I'm using plain html, everything works fine. But with ionic input it doesn't work and the cursor moves to the end after the keyboard input occurred. As is a wrapper for another input, I tried both setting selectionStart/selectionEnd properties for initial ion-input and its child but without success.

How to cause the cursor to move to the beginning of the input field in Ionic input after changing form control value in ts file?

home.page.ts:

export class HomePage {
  form = new FormGroup({
    amount: new FormControl(''),
  });
  constructor() {}

  amountHandler(event: any) {
    this.form.get('amount').setValue(event.target.value + '!');
    event.target.firstChild.selectionStart = 0;
    event.target.firstChild.selectionEnd = 0;
    //event.target.selectionStart = 0;
    //event.target.selectionEnd = 0;
  }
}

home.page.html:

<form [formGroup]="form">
  <ion-item>
    <ion-label>Amount: </ion-label>
    <ion-input
      (ionInput)="amountHandler($event)"
      formControlName="amount"
    ></ion-input>    
  </ion-item>
</form>

Answer 1

setValue() is processed asynchronically, ie it happens after your selectionStart . Try adding https://angular.io/api/core/ApplicationRef#tick after the setValue() .

tick() Invoke this method to explicitly process change detection and its side-effects.