angular 6 mat-dialog scroll down to bottom automatically

Question

I have an issue with scroll down automatically when open the mat-dialog. I have 2 buttons that cause the the problem (I assume) but I didn't figure out what to do to resolve the issue.

The component.ts code :

 openDialog(): void {
let dialogRef = this.dialog.open(FileBrowserComponent, { 
       height: '600px',
       width: '700px',
});

The dialog html code :

<div class="container">

<div class="img" *ngFor="let element of fileElements">
    <img src="{{assetsFullUrl(element.name)}}" alt="{{element.name}}" (dblclick)="selectedImage===true">
</div>

</div>

<vaadin-upload target="http://localhost:3000/assets/upload" method="POST" 
accept="image/*"></vaadin-upload>

<div class="buttons">
<button mat-raised-button color='primary' type="button" (click)="add()">Save</button>
<button mat-raised-button color='basic' type="button" (click)="cancel()">Cancel</button>
</div>

Thanks for your help.

Answer 1

Try adding "autoFocus: false" to your code:

openDialog(): void { let dialogRef = this.dialog.open(FileBrowserComponent, { height: '600px', width: '700px', autoFocus: false, });

Answer 2

According to the documentation, the first tabable element will be focused. You can assign tabindex="-1" to prevent the buttons from getting focused

<button mat-raised-button tabindex="-1">Not Tabbable</button>