在Angular 2 /材料的对话框中禁用自动对焦

Question

我正在使用来自 angular material-2 的对话框。

问题是：尤其是在 iPhone 或平板电脑中打开模态对话框时，我无法禁用自动对焦。在 iOS 中，它会自动聚焦对话框中的第一个输入字段！

我尝试使用标签索引并在其他输入字段中使用自动对焦，但它不起作用

我在我的代码中使用 Angular 2，在我的对话框中我使用的是表单控制。我尝试使用markasuntouchedafterviewInit，但我仍然有同样的问题！！

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

Stackblitz Example

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