Select2 ne fonctionne pas lorsqu’il est incorporé dans un modal bootstrap

Lorsque j’utilise un select2 (entrée) dans le modal bootstrap, je ne peux rien y entrer. C’est comme désactivé? En dehors de lui, le modal select2 fonctionne bien.

entrer la description de l'image ici

exemple de travail: http://jsfiddle.net/byJy8/1/ code:

  

adn js

 $("#vdn_number").select2({ placeholder: "00000", minimumInputLength: 2, ajax: { url: "getAjaxData/", dataType: 'json', type: "POST", data: function (term, page) { return { q: term, // search term col: 'vdn' }; }, results: function (data) { // parse the results into the format expected by Select2. // since we are using custom formatting functions we do not need to alter remote JSON data return {results: data}; } } }); 

réponses:

ici vous pouvez trouver une solution rapide

et voici «le bon chemin»: Select2 ne fonctionne pas lorsqu’il est incorporé dans un modal bootstrap

Ok, je l’ai au travail.

changement

  

à

  

(supprimer tabindex = “- 1” de modal)

Pour Select2 v4:

Utilisez ‘dropdownParent’ pour joindre le menu déroulant à la boîte de dialog modale, plutôt que le corps HTML.

    

Cela va attacher la liste déroulante Select2 pour qu’elle entre dans le DOM du modal plutôt que dans le corps HTML (par défaut). Voir https://select2.github.io/options-old.html#dropdownParent

J’ai trouvé une solution à cela sur github pour select2

https://github.com/ivaynberg/select2/issues/1436

La solution est la suivante:

 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; 

Explication copiée du lien ci-dessus:

Bootstrap enregistre un auditeur dans l’événement focusin qui vérifie si l’élément focalisé est soit l’overlay lui-même, soit un descendant de celui-ci – sinon il se recentre simplement sur la superposition. Avec la liste déroulante select2 attachée au corps, cela vous empêche de saisir quoi que ce soit dans le champ de texte.

Vous pouvez rapidement corriger cela en écrasant la fonction enforceFocus qui enregistre l’événement sur le modal

Supprimez simplement tabindex="-1" et ajoutez le overflow:hidden style overflow:hidden

Voici un exemple:

  
 .select2-close-mask{ z-index: 2099; } .select2-dropdown{ z-index: 3051; } 

Ceci est ma solution avec select2 4.0.0. Il suffit de remplacer le CSS juste en dessous de l’importation select2.css. Assurez-vous que l’index z est supérieur à votre boîte de dialog ou modal. Je viens d’append 2000 sur ceux par défaut. Parce que le z-index de mes dialogs est d’environ 1000.

changer le fichier select2.css

 z-index: 9998; ... z-index: 9999; ... z-index: 10000; 

à

 z-index: 10000; ... z-index: 10001; ... z-index: 10002; 

J’avais le même problème, mettre à jour z-index pour .select2-container devrait faire l’affaire. Assurez-vous que l’ z-index votre modal est inférieur à celui de select2.

 .select2-container { z-index: 99999; } 

Mis à jour: Si le code ci-dessus ne fonctionne pas correctement, supprimez également les index de tabulation de votre modal comme suggéré par @breq

Jus utiliser ce code sur Document.read ()

 $.fn.modal.Constructor.prototype.enforceFocus = function () {}; 

Réponse qui a fonctionné pour moi trouvé ici: https://github.com/select2/select2-bootstrap-theme/issues/41

 $('select').select2({ dropdownParent: $('#my_amazing_modal') }); 

Ne nécessite pas non plus de supprimer le tabindex .

Juste pour mieux comprendre comment les éléments tabindex fonctionnent pour compléter la réponse acceptée:

L’atsortingbut global tabindex est un entier indiquant si l’élément peut prendre le focus d’entrée (est focalisable), s’il doit participer à la navigation séquentielle au clavier, et si oui, à quelle position. Il peut prendre plusieurs valeurs:
-a valeur négative signifie que l’élément doit pouvoir être focalisé, mais ne doit pas être accessible via la navigation séquentielle au clavier;
-0 signifie que l’élément doit pouvoir être focalisé et accessible via une navigation séquentielle au clavier, mais que son ordre relatif est défini par la convention de la plate-forme;
-un moyen de valeur positive doit pouvoir être focalisé et accessible via une navigation séquentielle au clavier; son ordre relatif est défini par la valeur de l’atsortingbut: la séquence suit le nombre croissant du tabindex. Si plusieurs éléments partagent le même tabindex, leur ordre relatif suit leur position relative dans le document.

à partir de: Mozilla Devlopper Network

Basé sur la réponse de @pymarco, j’ai écrit cette solution, elle n’est pas parfaite mais résout le problème de focus de select2 et maintient la séquence de tabulation à l’intérieur du modal

  $.fn.modal.Constructor.prototype.enforceFocus = function () { $(document) .off('focusin.bs.modal') // guard against infinite focus loop .on('focusin.bs.modal', $.proxy(function (e) { if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !$(e.target).closest('.select2-dropdown').length) { this.$element.sortinggger('focus') } }, this)) } 

Si vous utilisez un popup jquery mobile, vous devez réécrire la fonction _handleDocumentFocusIn:

 $.mobile.popup.prototype._handleDocumentFocusIn = function(e) { if ($(e.target).closest('.select2-dropdown').length) return true; } 

Si vous rencontrez un problème avec le clavier iPad qui masque le modal bootstrap en cliquant sur l’entrée select2 , vous pouvez résoudre ce problème en ajoutant la règle suivante après l’initialisation de l’entrée select2 :

 if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) { var styleEl = document.createElement('style'), styleSheet; document.head.appendChild(styleEl); styleSheet = styleEl.sheet; styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0); document.body.scrollTop = 0; // Only for Safari } 

Tiré de https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475

EDIT: Si vos options ne sont pas affichées correctement, vous devez utiliser l’atsortingbut dropdownParent lors de l’initialisation de select2 :

 $(".select2").select2({ dropdownParent: $("#YOURMODALID") }); 

Bonne chance (:

Ok, je sais que je suis en retard à la fête. Mais laissez-moi partager avec vous ce qui a fonctionné pour moi. Les solutions tabindex et z-index ne fonctionnaient pas pour moi.

La définition du parent de l’élément select a fonctionné conformément aux problèmes courants répertoriés sur le site select2.

J’ai le même problème avec le select2 dans le bootstrap modal , et la solution était de supprimer le overflow-y: auto; et overflow: hidden ; à partir de .modal-open et .modal classes

Voici l’exemple de l’utilisation de jQuery pour supprimer le overflow-y :

 $('.modal').css('overflow-y','visible'); $('.modal').css('overflow','visible'); 

J’ai eu ce problème avant, j’utilise yii2 et je l’ai résolu de cette façon

 $.fn.modal.Constructor.prototype.enforceFocus = $.noop; 
 $("#IlceId").select2({ allowClear: true, multiple: false, dropdownParent: $("#IlceId").parent(), escapeMarkup: function (m) { return m; }, }); 

ce code fonctionne. Je vous remercie.