在Angular 2 / material

Question

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

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

我尝试使用制表符索引并在其他输入字段中使用自动对焦功能

我正在使用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 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});