Sweetalert: La touche Tab ne fonctionne pas après l'ouverture de deux modaux Sweet Alert d'affilée

Créé le 15 oct. 2014  ·  20Commentaires  ·  Source: t4t5/sweetalert

Bonjour,

Il semble que lorsque la boîte de dialogue SweetAlert en ouvre une autre après avoir terminé, la touche de tabulation cesse de fonctionner, toutes les autres frappes sont correctes.

Vous pouvez le recréer en utilisant l'exemple sur http://tristanedwards.me/sweetalert.

Celui-ci en particulier:

swal({      title: "Are you sure?",   
            text: "Your will not be able to recover this imaginary file!",   
            type:  "warning",   
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Yes, delete it!",   
            cancelButtonText: "No, cancel plx!",   
            closeOnConfirm: false,   
            closeOnCancel: false }, 
            function(isConfirm){  
                 if (isConfirm) {     
                 swal("Deleted!", "Your imaginary file has been deleted.", "success");  
                 } else {     
                 swal("Cancelled", "Your imaginary file is safe :)", "error");   
                 } });

Je pense que c'est une copie de la gestion des frappes du modal précédent, en particulier dans la fonction closeModal (), cette partie:

 // Reset the page to its previous state
    window.onkeydown = previousWindowKeyDown;
    document.onclick = previousDocumentClick;
    if (previousActiveElement) {
      previousActiveElement.focus();
    }

Peut-être s'agit-il simplement de se concentrer sur le modal précédent et d'enregistrer son keydown et onclick?

help wanted

Commentaire le plus utile

Pour implémenter le correctif par @jayquest sans changer la bibliothèque, j'ai utilisé le code suivant:

var previousWindowKeyDown = window.onkeydown;
swal ({
title: 'Êtes-vous sûr?',
closeOnConfirm: faux,
closeOnCancel: false
}, fonction (isConfirm) {
window.onkeydown = previousWindowKeyDown;
if (isConfirm) {
swal ('Supprimé!', 'Votre fichier imaginaire a été supprimé.', 'success');
} autre {
swal ('Annulé', 'Votre fichier imaginaire est en sécurité :)', 'erreur');
}
});

Tous les 20 commentaires

À partir de cet exemple, je ne vois pas vraiment que ce que vous dites est vrai,
Parce que la touche 'tab' se déplace simplement entre les boutons,
quand j'obtiens le deuxième modal, je n'ai qu'un seul bouton, donc peu importe combien vous appuierez sur le bouton de l'onglet, il restera toujours sur son seul bouton.

Désolé de ne pas avoir précisé cela!

Oui, c'est tabulation dans le modèle, mais après avoir fermé le deuxième modal, vous perdez la possibilité de naviguer sur la page Web avec la touche de tabulation (pas de modaux à l'écran juste la page Web).

J'ai tenté une solution sur jack126guy / sweetalert @ issue127 . Cela semble fonctionner dans la mesure où le focus revient sur le bouton de la page.

Cependant, cela révèle un autre problème: vous ne pouvez toujours pas accéder à un autre bouton et lorsque vous appuyez sur Entrée pour afficher à nouveau l'alerte, les choses deviennent bizarres.

Oui, j'ai tenté une solution similaire à la vôtre, mais avec une variable globale de fenêtre pour m'assurer qu'il s'agit d'un élément du site Web autre que SweetAlert, elle concentre l'élément sur le document mais la touche Tab ne fonctionne toujours pas.

Ce qui semble l'avoir résolu pour le moment, c'est la suppression de stopEventPropagation (e) dans la clause if (keycode == 9) de la méthode handleKeyDown . Mais je suppose qu'il y a d'autres effets secondaires à cela ...

Je voudrais vous montrer un commit, mais j'ai également apporté d'autres modifications à la bibliothèque que d'autres pourraient ne pas vouloir.

Donc, au cas où quelqu'un voudrait une correction temporaire de ce bogue, voici un dépôt que j'ai dérivé de ce projet: https://github.com/heero-yuy/sweetalert.git

Cela fonctionne à 100% pour tous mes projets jusqu'à présent, mais je ne l'ai pas testé de manière approfondie pour m'assurer que mes modifications ne cassent aucune autre fonctionnalité.

Je l'ai corrigé en insérant les deux lignes de code ci-dessus au début de la fonction sweetAlert ou swal à la ligne 215, je ne sais pas si c'est la meilleure solution, mais cela fonctionne pour moi.

/*
 * Global sweetAlert function
 */
var sweetAlert, swal;

sweetAlert = swal = function() {

    if(previousWindowKeyDown !== undefined && window.onkeydown !== previousWindowKeyDown)`
        window.onkeydown = previousWindowKeyDown;

: +1:. Cela devrait avoir une certaine priorité.

Le correctif de @jayquest semble fonctionner.

Pour implémenter le correctif par @jayquest sans changer la bibliothèque, j'ai utilisé le code suivant:

var previousWindowKeyDown = window.onkeydown;
swal ({
title: 'Êtes-vous sûr?',
closeOnConfirm: faux,
closeOnCancel: false
}, fonction (isConfirm) {
window.onkeydown = previousWindowKeyDown;
if (isConfirm) {
swal ('Supprimé!', 'Votre fichier imaginaire a été supprimé.', 'success');
} autre {
swal ('Annulé', 'Votre fichier imaginaire est en sécurité :)', 'erreur');
}
});

Pour développer le correctif de

(function (){

    var _swal = window.swal;

    window.swal = function(){

        var previousWindowKeyDown = window.onkeydown;

        _swal.apply(this, Array.prototype.slice.call(arguments, 0));

        window.onkeydown = previousWindowKeyDown;

    };

})();

Je peux également confirmer ce bogue et la solution de contournement ci-dessus fonctionne bien aussi! : +1:

Oui, la solution de contournement de @JustinWinthers fonctionne bien!

cependant, il semble f-up en utilisant échapper et entrer des clés dans la boîte de dialogue

La solution de contournement de @amoralidad a fonctionné pour moi. Merci!

merci @jayquest ... @ t4t5 veuillez corriger cela dans la branche master!

Je viens de soumettre une pull request avec ma solution. https://github.com/t4t5/sweetalert/pull/547

@JustinWinthers , l'utilisation de votre code casse le type: 'input' . Lorsque vous essayez de cliquer sur le bouton "Annuler" pour fermer la boîte de dialogue, il dit swal.showInputError is not a function .

Pour un exemple, allez à http://clubcare.no/dashboard et appuyez sur Glemt passord (mot de passe oublié)

La suppression de votre fonction la fait fonctionner à nouveau. Des idées sur la façon de se débarrasser de ce comportement? Je vous remercie!

@jayquest Merci d'avoir

Salut @JustinWinthers

J'ai essayé votre suggestion pour résoudre ce problème de tabulation après l'ouverture de SweetAlert. Cela a résolu le problème, mais j'ai commencé à obtenir cette erreur lorsque j'essaye de fermer le Sweetalert en utilisant swal.close(); lorsque le bouton cancel est cliqué:

swal.close is not a function

Ceci est similaire à ce que @EduardJS a dit ci-dessus. Y a-t-il un moyen de les faire fonctionner? Je pense que nous nous sommes rapprochés mais à cause de cette erreur, j'ai dû supprimer votre code suggéré. Toute aide sera appréciée.

À votre santé,
Neel.

La solution la plus simple possible basée sur la solution de contournement de @JustinWinthers que j'ai pu trouver (sans modifier la bibliothèque), est de se connecter uniquement à la fonction swal.close et de définir le window.onkeydown sur le window.onkeydown précédent Gestionnaire d'événements

(function (){
    var close = window.swal.close;
    var previousWindowKeyDown = window.onkeydown;
    window.swal.close = function() {
        close();
        window.onkeydown = previousWindowKeyDown;
    };
})();

ou dans mon cas encore plus simple:

(function (){
    var close = window.swal.close;
    window.swal.close = function() {
        close();
        window.onkeydown = null;
    };
})();

Avec cette solution de contournement, il est désormais également possible d'utiliser les touches Entrée et Échap dans la boîte de dialogue.

Les messages d'erreur mentionnés par @ Mr-Anonymous et @EduardJS ne se produisent plus non plus.

@kosst Parfait. Merci beaucoup d'avoir partagé ça. J'ai essayé votre code et cela fonctionne parfaitement. Merci beaucoup!!

À votre santé,
Neel.

Cette page vous a été utile?
0 / 5 - 0 notes