Mat-autocomplete long string, cursor appears at end of string, how to get cursor at start of string?

Question

I have no idea how to run code snippet for angular app in stackoverflow,

I am using mat-autocomplete ,I have 128 char long name selected, the cursor appends at the end of the string selected instead on the beginning. Have anyone observed this when using mat-autocomplete?

Here is the example, In the stackblitz link link to code, I just appended letter 'v' for california, when I select 'california' I see the cursor at end instead I want the cursor at the beginning of the string.

In the code link under app > app.component.ts, check state variable, change name property to 128 char long string then from drop down down select option, you will see cursor appearing at end of string.

Answer 1

With input and textarea there is no need to create custom Range as they provide their own API and in our case setSelectionRange() is what we need. But after using that, content of the input is still remains hidden, but looks like blur() and focus() does the trick.

optionSelected(input: HTMLInputElement) {
  input.blur();
  input.setSelectionRange(0, 0);
  input.focus();
}

<input ... #input>
<mat-autocomplete ... (optionSelected)="optionSelected(input)">

DEMO