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

Question

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

Rucksack

Answer 1

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

Kimberlite

can you please help me to solve this #52143552 @Kimberlite – Dinghy

Moreover use restoreFocus: false for disabling focus after dialog is closed. – Bethelbethena

@Bethelbethena seems to be for version >= 8 – Sonnnie

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. – Orling

Boolean values have been removed in v14: 14.0.0 Remove boolean option from autoFocus. Use string or AutoFocusTarget instead. – Incest

Just want to state that in angular material v17.2 documentation, boolean is still an allowed type for autoFocus: "autoFocus: AutoFocusTarget | string | boolean" – Waft

Answer 2

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});

Rheumatic

Answer 3

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__'
})

Incest

Actually autoFocus: false is now supported in later Mat Design – Foreglimpse

Answer 4

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();
}

}

Reiterant