Angular Material Dialog and disabling automatic focus on tabbable element

Question

The documentation reads:

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.

I can't see anything in the documentation or configuration options that allows you to completely disable this feature without having to use additional markup on each tabbable element. It seems a little unnecessary and messy.

eg <p>Contact us on <a href="mailto:[email protected]" tabindex="-1">[email protected]</a></p>

Is there a configuration option I missing? And if not, I am open to any guidance on how to best approach this.

Answer 1

Just to be clear here's an example.

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    autoFocus: false,
    width: '800px',
    disableClose: true,
    data: { 'data': data}
});

Second line (autoFocus: false) will disable the autofocus on dialogs.

You can see more from here.

Answer 2

There is an autoFocus attribute that you can set to false on your config that will prevent this from happening. Found it in the dialog-config source.