Угловой - Прокрутка вниз вниз автоматически при открытии углового диалога

Question

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

Я попытался:

• добавить autoFocus: false в моей конфигурации диалога
• изменить BrowserAnimationModule на NoopAnimationModule в моем файле app.module.ts
• добавитьtabindex="-1" в моем теге кнопки в содержимом диалога

, но ничего не помогло, я использую пользовательскую тему CSS без каких-либо JS-файлов, я использую материал только для использования диалога.

Здесьмой код:

public openAddLinkDialog(): void {
   this.dialog.open(AddLinkComponent).afterClosed().subscribe(data => {
      if (data) {
        console.log(data);
      }
   });
}

<div class="modal modal-right fade show" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Ajouter un lien</h5>
        <button type="button" class="close" (click)="closeDialog()">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body ps-container ps-theme-default">
        <p>Test</p>
      </div>
      <div class="modal-footer modal-footer-uniform">
        <button type="button" class="btn btn-bold btn-pure btn-secondary" (click)="closeDialog()">
          Fermer
        </button>
        <button type="button" class="btn btn-bold btn-pure btn-primary" [disabled]="form.invalid" (click)="addLink()">
          Ajouter
        </button>
      </div>
    </div>
  </div>
</div>
<div class="modal-backdrop fade show"></div>

Answer 1

Добавить объект конфигурации при открытии окна с настройкой autoFocus: false Например, здесь: const dialogRef = this.dialog.open( SomeComponent, { autoFocus: false }); В противном случае окно будет прокручено до первого фокусируемого элемента, т.е. вашей кнопки