Угловой Материал Textarea DONT Автофокус

Question

Я добавляю текстовую область в нижней части модального окна, и автофокус имеет побочный эффект прокрутки вниз. Отсутствие этого автофокуса решило бы проблему. Любая идея, что происходит.

  <mat-form-field >
      <textarea matTextareaAutosize matInput placeholder="Review Notes" [autofocus]="false" [(ngModel)]="reviewNotes"></textarea>
  </mat-form-field>

"@ angular / material": "^ 6.4.7",

Answer 1

Лучший способ контролировать это - использовать опцию MatDialog специально для этой цели: опцию autoFocus в вашей конфигурации диалога. Например:

constructor(public dialog: MatDialog) {}
...
openDialog(): void {
  this.dialog.open(MyExampleDialog, {
    autoFocus: false
  });
}

Преимущество этого состоит в том, что если пользователь нажимает клавишу Tab после открытия диалога, «первый элемент с вкладками» все еще получает фокус. Использование tabindex = "- 1" помещает этот элемент в конец цепочки фокусировки, делая его менее интуитивно доступным.

Answer 2

Из угловых материалов Docs :

По умолчанию первый элемент с вкладками в диалоге получает фокус при открытии. Это можно настроить, установив атрибут cdkFocusInitial для другого фокусируемого элемента.

Как только диалоговое окно открывается, оно автоматически фокусирует первый элемент с вкладками.

Вы можете контролировать, какие элементы являются табуляцией с помощью атрибута tabindex

учитывая это, вы можете установить свойство tabindex="-1" для элемента, который вы не хотите получать, и оно будет проигнорировано.

<mat-form-field >
  <textarea matTextareaAutosize tabindex="-1" matInput placeholder="Review Notes" [autofocus]="false" [(ngModel)]="reviewNotes"></textarea>
</mat-form-field>

РЕДАКТИРОВАТЬ: Как уже упоминалось в другом ответе G. Tranter , другой, более полезный и подходящий метод - указать autoFocus: false в качестве опции конфигурации для метода openDialog() в MatDialog, это сохранит поведение элементов с вкладками в неизменном виде, удаляя при этом только начальный фокус на нагрузке.

Ссылка здесь: https://material.angular.io/components/dialog/api#MatDialogConfig

Таким образом, метод openDialog() должен выглядеть примерно так:

openDialog(): void {
   this.dialog.open(MyDialog, {
       autoFocus: false
   });
}