Mat-autocomplete длинная строка, курсор появляется в конце строки, как получить курсор в начале строки?

Question

Я не знаю, как запустить фрагмент кода для приложения angular в stackoverflow,

Я использую mat-autocomplete, у меня выбрано имя длиной 128 символов, курсор добавляется в конец строки выбран вместо этого в начале. Кто-нибудь наблюдал это при использовании mat-autocomplete?

Вот пример: В ссылке на стеке ссылка на код , Я просто добавил букву «v» для Калифорнии, когда я выбираю «Калифорния», я вижу курсор в конце, вместо этого я хочу курсор в начале строки.

В кодовой ссылке в app> app.component.ts проверьте переменную состояния, измените свойство name на строку длиной 128 символов, затем из выпадающего списка выберите опцию, в конце строки появится курсор, который появится.

Answer 1

С input и textarea нет необходимости создавать собственные Range , поскольку они предоставляют собственный API, а в нашем случае setSelectionRange() - это то, что нам нужно. Но после этого содержимое ввода все еще остается скрытым, но выглядит как blur() и focus() делает свое дело.

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

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

DEMO