Disable auto focus in dialog- modal in Angular 2/ material

Mohamad Arbash picture Mohamad Arbash · Nov 29, 2017 · Viewed 27.1k times · Source

I'm using dialog from angular material-2.

The problem is: I can't disable auto focus when modal-dialog is opened in iPhone or tablet especially. In iOS, it automatically focuses the first input field in the dialog!

I tried with tab index and with auto focus in other input-field it doesn't work

I'm using Angular 2 for my code, in my dialog I'm using form-control. I tried to use markasuntouched afterviewInit, but I still have the same problem !!

Answer

yurzui picture yurzui · Nov 30, 2017

Since @angular/[email protected] there is special option autoFocus on MatDialogConfig

/** Whether the dialog should focus the first focusable element on open. */
autoFocus?: boolean = true;

So you can use it as follows:

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: { name: this.name, animal: this.animal },
  autoFocus: false   <============================== this line
});

Stackblitz Example