Select2 ne fonctionne pas lorsqu'il est intégré dans un bootstrap modal

quand j'utilise un select2 (input) dans bootstrap modal, Je ne peux rien y taper. C'est comme les personnes à mobilité réduite? En dehors de la sélection modale 2 fonctionne très bien.

enter image description here

exemple pratique: http://jsfiddle.net/byJy8/1 / code:

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">


<form class="form-horizontal">

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="vdn_number">Numer</label>
  <div class="controls">
     <!-- seleect2 -->
    <input name="vdn_number" type="hidden" id="vdn_number"  class="input-large" required=""  />
  </div>
</div>

  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

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 un rapide fix

et voici "le droit chemin": Select2 ne fonctionne pas lorsqu'il est incorporé dans un bootstrap modal

261
demandé sur Community 2013-08-28 15:49:40

19 réponses

Ok, je l'ai pour travailler.

changement

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

à

<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

(supprimer tabindex="-1" de l'modal)

489
répondu breq 2017-01-19 11:02:01

pour Select2 v4:

utilisez dropdownParent pour attacher le dropdown au Dialogue modal, plutôt que le corps HTML.

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <select id="select2insidemodal" multiple="multiple">
          <option value="AL">Alabama</option>
            ...
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script>

$(document).ready(function() {
  $("#select2insidemodal").select2({
    dropdownParent: $("#myModal")
  });
});

</script>

cela attachera le dropdown Select2 de sorte qu'il tombe dans le DOM du modal plutôt que dans le corps HTML (la valeur par défaut). Voir https://select2.org/dropdown#dropdown-placement

165
répondu dboswell 2018-09-27 10:22:42

j'ai trouvé une solution sur github pour select2

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

la solution est:

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

explication copiée du lien ci-dessus:

Bootstrap enregistre un auditeur de l'événement focusin qui vérifie si l'élément focused est la superposition elle - même ou un descendant de celle-ci-si ce n'est pas juste recentre sur la superposition. Avec le dropdown de select2 étant attaché au corps, cela vous empêche effectivement d'entrer quoi que ce soit dans le champ de texte.

vous pouvez y remédier en écrasant la fonction enforceFocus qui enregistre l'événement sur le modal

152
répondu pymarco 2013-10-24 18:46:18

il suffit de supprimer tabindex="-1" et ajouter le style overflow:hidden

voici un exemple:

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
    <!---content modal here -->
</div>
26
répondu MrBii 2018-01-09 00:16:32
.select2-close-mask{
    z-index: 2099;
}
.select2-dropdown{
    z-index: 3051;
}

C'est ma solution avec select2 4.0.0. Il suffit de surcharger le css juste en dessous de la sélect2.css à l'importation. S'il vous plaît assurez-vous que le z-index est plus grand que votre dialogue ou modal. J'ajoute juste 2000 sur les valeurs par défaut. Parce que l'indice z de mes dialogues est d'environ 1000.

21
répondu Diluka W 2015-05-06 08:25:27

changement select2.css fichier

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

à

z-index: 10000;
...
z-index: 10001;
...
z-index: 10002;
5
répondu user1616435 2014-02-12 08:48:18

j'ai eu le même problème, mettre à jour z-index pour .select2-container devrait faire l'affaire. Assurez-vous que votre modal z-index est inférieur à select2.

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

mis à jour: Dans le cas où le code ci-dessus ne fonctionne pas correctement, supprimez aussi les tabindexes de votre modal comme @breq l'a suggéré

5
répondu hhk 2017-06-12 07:47:05

Jus utiliser ce code sur le Document.lire ()

$.fn.modal.Constructor.prototype.enforceFocus = function () {};
5
répondu S.Mohamed Mahdi Ahmadian zadeh 2017-06-17 05:42:32

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 d'enlever le tabindex .

5
répondu Ashraf Slamang 2017-11-29 14:53:30

Juste pour mieux comprendre comment tabindex éléments travaille à compléter accepté de répondre :

l'attribut tabindex global 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:

  -une valeur négative signifie que l'élément doit être focalisable, mais ne doit pas être accessible via navigation par clavier séquentiel;

  -0 signifie que l'élément doit être focalisable et accessible via une navigation séquentielle au clavier, mais son ordre relatif est défini par la Convention plate-forme.;

  -un moyen de valeur positive doit être focalisable et accessible via une navigation séquentielle au clavier; son ordre relatif est défini par la valeur de l'attribut: l'ordre séquentiel suit le nombre croissant du tabindex. Si plusieurs éléments partager la même tabindex, leur ordre relatif suit leur position relative dans le document.

de : Mozilla Devlopper Réseau

4
répondu Sébastien Garcia-Roméo 2016-06-05 18:18:34

basé sur la réponse de @pymarco j'ai écrit Cette solution, elle n'est pas parfaite mais résout le problème de mise au point select2 et maintient la séquence d'onglets travaillant à 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.trigger('focus')
            }
        }, this))
    }
2
répondu Angelo Cavalet 2018-03-07 13:45:14

si vous utilisez jQuery Mobile popup, vous devez réécrire la fonction _handleDocumentFocusIn:

$.mobile.popup.prototype._handleDocumentFocusIn = function(e) {
  if ($(e.target).closest('.select2-dropdown').length) return true;
}
1
répondu Dr. Clò Luca 2015-04-16 14:57:59

si vous avez un problème avec le iPad clavier qui masquer le bootstrap modal en cliquant sur le select2 entrée, vous pouvez résoudre cela en ajoutant la règle suivante après l'initialisation du select2 entrée :

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'attribut dropdownParent lors de l'initialisation de select2 :

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

bonne chance (:

1
répondu Gangai Johann 2018-02-05 14:08:19

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 n'ont pas fonctionné pour moi.

le réglage du parent de l'élément select fonctionnait selon le problèmes courants listés sur le site select 2.

1
répondu joker 2018-07-02 11:30:17

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

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

$('.modal').css('overflow-y','visible');
$('.modal').css('overflow','visible');
0
répondu raBne 2017-04-28 10:46:11

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;
0
répondu yousef 2017-05-16 16:11:53
$("#IlceId").select2({
    allowClear: true,
    multiple: false,
    dropdownParent: $("#IlceId").parent(),
    escapeMarkup: function (m) {
        return m;
    },
});

ce code fonctionne. Remercier.

0
répondu ramazan polat 2017-12-19 08:18:20

je viens de le faire fonctionner en incluant select2.min.css

Essayer iy

mon html modal de bootstrap 3 est

<div id="changeTransportUserRequestPopup" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 40%!important; ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>Warning</h3>
            </div>
            <div class="modal-body" id="changeTransportUserRequestPopupBody">
                <select id="cbTransport" class="js-example-basic-single" name="cbTransport" style="width:100%!important;"></select>
            </div>
            <div class="modal-footer">
                <button id="noPost" class="btn btn-default" name="postConfirm" value="false" data-dismiss="modal">Cancel</button>
                <button type="submit" id="yesChangeTransportPost" class="btn btn-success" name="yesChangeTransportPost" value="true" data-dismiss="modal">Yes</button>
            </div>
        </div>
    </div>
</div>
0
répondu Academy of Programmer 2018-09-06 01:39:48

j'ai résolu cela généralement dans mon projet en surchargeant la fonction select2 . Maintenant, il va vérifier s'il n'y a pas de dropdownParent et si la fonction est appelée sur un élément qui a un parent du type div.modal . Si c'est le cas, il ajoutera ce modal comme parent pour le dropdown.

de cette façon, vous n'avez pas à le spécifier chaque fois que vous créez une boîte select2-input.

(function(){
    var oldSelect2 = jQuery.fn.select2;
    jQuery.fn.select2 = function() {
        if (arguments.length === 1 && typeof arguments[0] === 'object' && typeof arguments[0].dropdownParent !== 'defined') {
            const modalParent = jQuery(this).parents('div.modal').first();
            if (modalParent.length > 0) {
                arguments[0].dropdownParent = modalParent;
            }
        }
        return oldSelect2.apply(this,arguments);
    };
})();
0
répondu Zombaya 2018-09-27 13:46:28