CODEWITHSUNDEEP
angularmodal-dialogangular-material2
Mohamad Arbash
Mohamad Arbash

Reputation: 1161

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

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

Upvotes: 116

Views: 86647

Answers (4)

Asaf Bello
Asaf Bello

Reputation: 91

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

}

Upvotes: 0

Get Off My Lawn
Get Off My Lawn

Reputation: 36289

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

Upvotes: 3

Toan NC
Toan NC

Reputation: 3160

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

Upvotes: 7

yurzui
yurzui

Reputation: 214007

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

Upvotes: 241

Related Questions