Désactiver l'auto focus dans les dialogues modaux dans Angular 2/ material

Question

J'utilise le dialogue d'angular material-2.

Le problème est que je ne peux pas désactiver l'auto focus lorsque le dialogue modal est ouvert sur l'iPhone ou la tablette en particulier. Dans iOS, le focus se fait automatiquement sur le premier champ de saisie de la boîte de dialogue !

J'ai essayé avec l'index de tabulation et avec le focus automatique dans d'autres champs de saisie, mais cela ne fonctionne pas.

J'utilise Angular 2 pour mon code, dans mon dialogue j'utilise form-control. J'ai essayé d'utiliser markasuntouched afterviewInit mais j'ai toujours le même problème !

Answer 1

Desde @angular/material@5.0.0-rc.1 il existe une option spéciale autoFocus en MatDialogConfig

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

Vous pouvez donc l'utiliser comme suit :

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

Exemple de Stackblitz

Answer 2

J'ai utilisé la solution pour désactiver la mise au point automatique lors de l'ouverture de la boîte de dialogue et pour éviter la mise au point automatique sur le dernier bouton sélectionné. Je vois que cela fonctionne bien pour le dialogue et le contrôle de la feuille inférieure dans Angular Material, voir le code :

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

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

Answer 3

CDK Version 14+

A partir de la version 14 Les valeurs booléennes ne sont plus prises en charge. Ainsi, pour désactiver le focus à l'aide de autoFocus vous pouvez passer un sélecteur de requête de quelque chose qui n'existe pas.

@breaking-change
14.0.0 Supprimer l'option booléenne de l'autoFocus. Utiliser une chaîne de caractères ou AutoFocusTarget à la place.

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