How to prevent scrolling down in Angular material dialog?

Question

I retrieve data via http requests and the text is pre-formated as HTML text and most of the time quite long. Essentially I use the following content:

<h2 matDialogTitle> My title</h2>
<mat-dialog-content>
  <p [innerHTML]="data.displayText" ></p>
</mat-dialog-content>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close color="primary">Close</button>
</div>

The content of the dialog is always scrolled down - close to the very ending. How to prevent this feature and display the content from the very beginning?

Answer 1

By default, a MatDialog will set focus to the first focusable component in the dialog, which ends up being your button below your content. You can disable this feature when you launch the dialog through the dialog config:

dialog.open(MyDialogComponent, {
    autoFocus: false
});