禁用角度2/材质对话框模式的自动焦点

我用的是角度材料 -2的对话框。

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

我尝试了制表符索引和自动焦点在其他输入字段它不工作

我使用角度2的代码，在我的对话框中，我使用窗体控制。我尝试使用 markasuntouched afterviewInit，但我仍然有同样的问题! ！

56843 次浏览

小开

Since @angular/material@5.0.0-rc.1 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});

小开

CDK Version 14+

As of version 14 boolean values are no longer supported. So to disable focus using autoFocus you can pass a query selector of something that doesn't exist.

@breaking-change
14.0.0 Remove boolean option from autoFocus. Use string or AutoFocusTarget instead.

this.dialog.open(DialogOverviewExampleDialog, {
autoFocus: '__non_existing_element__'
})