MatDialogRef textarea scrolls to bottom

Question

I have an app where i use MatDialogRef to open a component as a dialog.

The dialog shows a long text, but for some reason, the textarea scrolls to the bottom. This does not happen when it's not a dynamically created component.

Heres an example: https://stackblitz.com/edit/matdialogref-textarea-scroll-issue

I hope someone can explain whats happening and how to fix it, so the textarea stays in the top of the scroll.

Thanks in advance!

Answer 1

From @angular/material dialog docs:

Once a dialog opens, the dialog will automatically focus the first tabbable element.

You can control which elements are tab stops with the tabindex attribute

Just add a tabindex=0 on the modal div:

<div class="dialog" tabindex="0">
    <textarea class="texta" [(ngModel)]="data"></textarea>
</div>

---

Here's a Working Demo for your ref.

Here's another thread for your ref: angular 6 mat-dialog scroll down to bottom automatically