web-dev-qa-db-fra.com

Angular7 et NgbModal: comment supprimer la mise au point automatique par défaut

nous venons de mettre à jour notre application vers angular 7 et nous avons remarqué que tous les modaux ngBootstrap ont maintenant une mise au point automatique par défaut sur le bouton de fermeture comme l'image suivante.

modal image

voici mon code:

code modal html:

<form [formGroup]="storeForm" novalidate>
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Modal Test</h4>
            <button type="button" class="close" aria-label="Close" 
               (click)="activeModal.dismiss('Cross click')">
               <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <h4>Todo</h4>
        </div>
        <div class="modal-footer">
            <button role="button" type="submit" class="btn btn-primary" 
               (click)="activeModal.close('Finish click')" prevent-double- 
               submit>{{ 'store.add.finish' | translate }}</button>
       </div>
    </div>
</form>

et comment s'appelle le modal grâce à mon composant.ts

    const modal = this._modalService.open(ModalComponent, { backdrop: 
       'static', size: 'lg'});
    modal.result.then(
        (data) => {
           // some code
        },
        () => {
        }
    );

Ma question est de savoir comment puis-je supprimer cette mise au point automatique par défaut qui ne correspond pas à notre comportement attendu?

Merci pour la lecture et veuillez pardonner les fautes d'orthographe.

angulartypescriptng-bootstrapng-modal
10
Flow

La concentration doit être dans le mode modal pour des raisons d'accessibilité et de navigation au clavier. Par défaut, le focus est sur le premier élément focusable dans modal, qui dans votre cas est le bouton de fermeture. Vous pouvez ajouter l'attribut ngbAutofocus à l'élément où vous souhaitez placer le focus.

Démo de gestion de focus .

<button type="button" ngbAutofocus class="btn btn-danger"
      (click)="modal.close('Ok click')">Ok</button>

Vous pouvez en savoir plus sur github

21
Kld

C'est un vilain hack, mais vous pouvez ajouter un élément non visible comme premier élément:

<input type="text" style="display:none" />
4
Jacquers

Si le bouton de fermeture ne vous dérange pas, mais que vous souhaitez vous débarrasser du contour laid, vous pouvez utiliser outline: none.

template.html:

<button type="button" aria-label="Close">Close</button>

styles.css:

button[aria-label="Close"]:focus {
  outline: none;
}
3
Eudz

Ajouter style="outline: none; "à votre bouton de fermeture

Exemple :

<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"> 
<span aria-hidden="true">&times;</span>
</button>
0
Sandeep Patel