O Select2 não funciona quando incorporado a um modal de inicialização

Quando uso um select2 (entrada) no modal de inicialização, não consigo digitar nada nele. É como desativado? Fora do modal select2 funciona bem.

Exemplo de trabalho: 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>

e 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};
        }
    }
});

respostas:

aqui você pode encontrar uma solução rápida

e aqui está 'o caminho certo': Select2 não funciona quando incorporado em um modal de autoinicialização

Ok, eu tenho que trabalhar.

mudança

<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">

para

<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">

(remova tabindex = "- 1" do modal)

Para Select2 v4:

Use dropdownParentpara anexar o menu suspenso à caixa de diálogo modal, em vez do corpo 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>

Isso anexará o menu suspenso Select2 para que ele se enquadre no DOM do modal e não no corpo do HTML (o padrão). Consulte https://select2.org/dropdown#dropdown-placement

Eu encontrei uma solução para isso no github para select2

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

Para o bootstrap 3, a solução é:

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

O Bootstrap 4 renomeou o enforceFocusmétodo para _enforceFocus, então você precisará corrigi-lo:

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

Explicação copiada do link acima:

O Bootstrap registra um ouvinte no evento focusin que verifica se o elemento focado é a sobreposição em si ou um descendente dela - se não, ele apenas se concentra novamente na sobreposição. Com o menu suspenso select2 sendo anexado ao corpo, isso evita que você insira qualquer coisa no campo de texto.

Você pode corrigir isso substituindo a função enforceFocus que registra o evento no modal

Basta remover tabindex="-1"e adicionar estilooverflow:hidden

Aqui está um exemplo:

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
    <!---content modal here -->
</div>

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

Esta é a minha solução com o select2 4.0.0. Basta substituir o css logo abaixo da importação select2.css. Verifique se o índice z é maior que o seu diálogo ou modal. Acabei de adicionar 2000 nos padrões. Porque o índice z dos meus diálogos é de cerca de 1000.

Defina o dropdownParent. Eu tive que colocá-lo no conteúdo .modal dentro do modal ou o texto acabaria centralizado.

$("#product_id").select2({
    dropdownParent: $('#myModal .modal-content')
});

Resposta que funcionou para mim encontrada aqui: https://github.com/select2/select2-bootstrap-theme/issues/41

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

Também não requer a remoção do tabindex.

De acordo com a documentação oficial do select2, esse problema ocorre porque os modais de Bootstrap tendem a roubar o foco de outros elementos fora do modal.

Por padrão, o Select2 anexa o menu suspenso ao elemento e é considerado "fora do modal".

Em vez disso, anexe o menu suspenso ao próprio modal com a configuração dropdownParent:

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

Consulte a referência: https://select2.org/trou Troubleshooting / common - problems

Eu tive o mesmo problema, a atualização z-indexpara .select2-containerdeve fazer o truque. Verifique se o modal z-indexé menor que o select2.

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

Atualizado: caso o código acima não funcione corretamente, remova também os índices de tabulação do seu modal, como sugerido pelo @breq

Basta usar esse código em Document.read ()

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

Este problema é o trabalho para mim Função Jquery única

$('#myModal .select2').each(function() {  
   var $p = $(this).parent(); 
   $(this).select2({  
     dropdownParent: $p  
   });  
});

alterar o arquivo select2.css

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

para

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

Apenas para entender melhor como os elementos tabindex funcionam para concluir a resposta aceita:

O atributo global tabindex é um número inteiro indicando se o elemento pode receber o foco de entrada (é focalizável), se deve participar da navegação seqüencial do teclado e, em caso afirmativo, em que posição. Pode levar vários valores:
  -um valor negativo significa que o elemento deve ser focável, mas não deve ser acessível via navegação seqüencial no teclado;
  -0 significa que o elemento deve ser focável e alcançável através da navegação seqüencial do teclado, mas sua ordem relativa é definida pela convenção da plataforma;
  -um meio de valor positivo deve ser focalizável e alcançável através da navegação sequencial do teclado; sua ordem relativa é definida pelo valor do atributo: o seqüencial segue o número crescente do índice de tabulação. Se vários elementos compartilham o mesmo índice de tabulação, sua ordem relativa segue sua posição relativa no documento.

de: Mozilla Devlopper Network

Se você tiver um problema com o teclado do iPad que oculta o modal de autoinicialização enquanto clica na entrada select2 , você pode resolver isso adicionando a seguinte regra após a inicialização da select2entrada:

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
}

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

EDIT: Se suas opções não forem mostradas corretamente, você precisará usar o dropdownParentatributo ao inicializar select2:

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

Boa sorte (:

Com base na resposta @pymarco que escrevi esta solução, ela não é perfeita, mas resolve o problema de foco select2 e mantém a sequência de guias funcionando dentro do 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))
    }

No meu caso, tive o mesmo problema com dois modais e tudo foi resolvido usando:

$('.select2').each(function() { 
    $(this).select2({ dropdownParent: $(this).parent()});
})

Como na edição do projeto # 41, um usuário disse.

$("#IlceId").select2({
    allowClear: true,
    multiple: false,
    dropdownParent: $("#IlceId").parent(),
    escapeMarkup: function (m) {
        return m;
    },
});

este código está funcionando. Obrigado.

Ok, eu sei que estou atrasado para a festa. Mas deixe-me compartilhar com você o que funcionou para mim. As soluções tabindex e z-index não funcionaram para mim.

A configuração do pai do elemento select funcionou de acordo com os problemas comuns listados no site select2.

Se você usar o jquery mobile popup, deverá reescrever a função _handleDocumentFocusIn:

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

Eu tenho o mesmo problema com o select2in bootstrap modale a solução foi remover o overflow-y: auto;e overflow: hidden; de .modal-opene.modal classes

Aqui está o exemplo do uso jQuerypara remover o overflow-y:

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

eu tive esse problema antes, estou usando o yii2 e resolvi dessa maneira

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

Eu tive um problema semi-relacionado em um aplicativo, por isso vou colocar no meu 2c.

Eu tenho vários modais com formulários contendo widgets select2. Abrir o modal A, em seguida, outro modal dentro do modal A, faria com que os widgets select2 dentro do modal B desaparecessem e falhassem na inicialização.

Cada um desses modais estava carregando os formulários via ajax.

A solução foi remover os formulários do Dom ao fechar um modal.

$(document).on('hidden.bs.modal', '.modal', function(e) {
    // make sure we don't leave any select2 widgets around 
    $(this).find('.my-form').remove();
});

$('.modal').on('shown.bs.modal', function (e) {
    $(this).find('.select2me').select2({
        dropdownParent: $(this).find('.modal-content')
    });
})

Resolvi isso geralmente no meu projeto sobrecarregando a select2função-. Agora ele verificará se não há dropdownParent e se a função é chamada em um elemento que possui um pai do tipo div.modal. Nesse caso, ele adicionará esse modal como pai do menu suspenso.

Dessa forma, você não precisa especificá-lo toda vez que criar uma caixa de seleção-2-entrada.

(function(){
    var oldSelect2 = jQuery.fn.select2;
    jQuery.fn.select2 = function() {
        const modalParent = jQuery(this).parents('div.modal').first();
        if (arguments.length === 0 && modalParent.length > 0) {
            arguments = [{dropdownParent: modalParent}];
        } else if (arguments.length === 1
                    && typeof arguments[0] === 'object'
                    && typeof arguments[0].dropdownParent === 'undefined'
                    && modalParent.length > 0) {
            arguments[0].dropdownParent = modalParent;
        }
        return oldSelect2.apply(this,arguments);
    };
    // Copy all properties of the old function to the new
    for (var key in oldSelect2) {
        jQuery.fn.select2[key] = oldSelect2[key];
    }
})();

Acabei de trabalhar incluindo select2.min.css

Experimente o iy

Meu html modal do bootstrap 3 é

<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>

você pode chamar o gatilho select2 novamente dentro do seu $ (documento)

$(".select2").select2({ 
                width: '120' 
            });

Para usar o bootstrap 4.0 com o lado do servidor (dados ajax ou json inline), você precisa adicionar tudo isso:

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

e quando o modal estiver aberto, crie o select2:

  // when modal is open
  $('.modal').on('shown.bs.modal', function () {
            $('select').select2({
                  // ....
            });
  });

No meu caso, eu fiz isso e funciona. Eu uso o pacote para carregá-lo e, neste caso, funcionou para mim

 $(document).on('select2:select', '#Id_Producto', function (evt) {
   // Here your code...
  });