在Angular 2 /材质中禁用对话模式中的自动对焦

Question

我正在使用角度材料-2的对话框.

问题是:在iPhone或平板电脑中打开模态对话框时,我无法禁用自动对焦.在iOS中,它会自动将第一个输入字段聚焦在对话框中!

我尝试使用tab索引,并在其他输入字段中使用自动焦点,但它不起作用

我正在使用Angular 2作为我的代码,在我的对话框中我正在使用表单控件.我试过用markasuntouched afterviewInit,但我还是有同样的问题!!

Answer 1

由于@angular/material@5.0.0-rc.1有特殊的选项自动对焦上MatDialogConfig

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

所以你可以按如下方式使用它:

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

Stackblitz示例

Answer 2

我使用该解决方案在打开对话框时禁用自动对焦，并避免自动对焦最后选择的按钮。我发现它对于 Angular Material 中的对话框和底部工作表控件都适用，请参阅代码：

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

this.matBottomSheet.open(FilePickerComponent, {
      data: inputData,
      autoFocus: false,
      restoreFocus: false});