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