禁用对话框中的自动聚焦- Angular 2/ material中的模式

Question

我使用的是angular material-2中的对话框。

问题是:当模式对话框在iPhone或tablet中打开时，我无法禁用自动对焦。在iOS中，它会自动聚焦对话框中的第一个输入字段！

我尝试使用制表符索引和其他输入字段中的自动聚焦，但不起作用

我在代码中使用了Angular 2，在我的对话框中我使用了form-control。我尝试使用markasuntouched afterviewInit，但仍然有同样的问题!！

Answer 1

从@angular/material@5.0.0-rc.1开始，在MatDialogConfig上有一个特殊的选项autoFocus

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

Answer 2

我使用了这个解决方案，在打开对话框时禁用自动对焦，并避免在最后选择的按钮上自动对焦。我看到它在Angular材质的对话框和底板控件上都工作得很好，参见代码：

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

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