104

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 !!

Adam
  • 3,815
  • 29
  • 24
Mohamad Arbash
  • 1,041
  • 2
  • 7
  • 6

4 Answers4

221

Since @angular/material@5.0.0-rc.1 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

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • can you please help me to solve this https://stackoverflow.com/questions/52143052/how-to-manually-set-focus-on-mat-form-field-in-angular-6 @yurzui – Zhu Sep 03 '18 at 04:17
  • 23
    Moreover use `restoreFocus: false` for disabling focus after dialog is closed. – surazzarus Mar 28 '19 at 08:10
  • @surazzarus seems to be for version >= 8 – Worthy7 Jun 03 '19 at 05:35
  • Autofocus really should be disabled by default in Angular Material. None of their examples show the dialog button as focused by default, and so it can hardly be expected behaviour by most developers. – Glenster Aug 31 '22 at 05:51
  • Boolean values have been removed in v14: `14.0.0 Remove boolean option from autoFocus. Use string or AutoFocusTarget instead.` – Get Off My Lawn Nov 17 '22 at 23:42
5

I used the solution to disable auto focus when open the dialog and also avoid auto focus on the last selected button. I see that it works well for both dialog and bottom sheet control in Angular Material, see the code:

this.dialog.open(YourComponent, {
      data: inputData,
      width: '100%', 
      autoFocus: false, 
      restoreFocus: false
    });

this.matBottomSheet.open(FilePickerComponent, {
      data: inputData,
      autoFocus: false,
      restoreFocus: false});
Toan NC
  • 2,960
  • 1
  • 14
  • 6
1

CDK Version 14+

As of version 14 boolean values are no longer supported. So to disable focus using autoFocus you can pass a query selector of something that doesn't exist.

@breaking-change
14.0.0 Remove boolean option from autoFocus. Use string or AutoFocusTarget instead.

this.dialog.open(DialogOverviewExampleDialog, {
  autoFocus: '__non_existing_element__'
})
Get Off My Lawn
  • 34,175
  • 38
  • 176
  • 338
0

kind of a hack since the AutoFocusTarget didn't work for me

  <button class="generalBtn" [mat-dialog-close]="true" #confirmBtn>{{ data.confirmText }}</button>

then (getting the focus option from the component that open the modal)

  @ViewChild('confirmBtn') confirmBtn: ElementRef;

  ngAfterViewChecked(): void { // using last life cycle before destroy to remove material auto focus
if(this.data.focusOnConfirm) {
  this.confirmBtn.nativeElement.focus();
}

}

Asaf Bello
  • 91
  • 4