Select2 not working inside bootstrap modal

问题

I am trying to use select2 inside bootstrap modal but it is not getting the focus automatically as well as down and up arrows are not working for the populated list.

The same select2 works when I put it outside the modal popup.

When I searched, I found many are facing this same problem and found this post

Select2 doesn't work when embedded in a bootstrap modal

I implemented both the solutions from it

Removed tabindex from modal popup.
Commented code of enforceFocus function in modal.js file.

But it is still not working! Any idea what I could still be missing?

Edit1

It works on firefox when tabindex is removed from the modal div but not with IE9

Edit2

I found that removing tabindex is actually not getting recognized by IE9 because I can still hide the popup by escape key in IE but not in Firefox.

回答1:

place this somewhere in your JS:

   //fix modal force focus
   $.fn.modal.Constructor.prototype.enforceFocus = function () {
      var that = this;
      $(document).on('focusin.modal', function (e) {
         if ($(e.target).hasClass('select2-input')) {
            return true;
         }

         if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
            that.$element.focus();
         }
      });
   };

回答2:

I changed:

<div class="modal fade bd-example-modal-lg"  tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

to the following:

<div class="modal fade bd-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

That is, removing the attribute tabindex="-1" from the element.

回答3:

Use bellow code. This will solve your bug.

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

回答4:

I tried to set z-index for select2 dropdown option, and it worked for me. Here is what I did:

.select2-container.select2-container--default.select2-container--open  {
  z-index: 5000;
}

回答5:

Try this

<div class="col-sm-8" id="select">
    <select type="text" class="form-control" id="helloselect" data-width="100%" name="helloselect">
        <option>Hello</option>
        <option>Hola</option>
        <option>Hallo</option>
    </select>
</div>

and the script

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

回答6:

the attribute tabindex='-1' in bootstrap modal prevents any element outside modal being reachable or focused by tab key. It is useful for limit tabs only on modal, for accessibility. But elements created by selec2 are children of document. You need to set dropdownParent to your modal

$(document).ready(function() {

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

    $('[data-toggle=offcanvas]').click(function() {
      $('.row-offcanvas').toggleClass('active');
    });
  


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>JS Bin</title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>

</head>
<body>
  <a href="" data-target="#myModal" data-toggle="modal">Convert to popup</a>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <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"><i class="fa fa-close"></i></span>
            <span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Bootsrap4 Modal Label</h4>
        </div>
        <div class="modal-body">
		  <div id="PopupWrapper">
            <select class="form-control">
              <option>red</option>
              <option>blue</option>
              <option>green</option>
              <option>orange</option>
              <option>yellow</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

jsbin example

meaning of tabindex=-1

回答7:

this will do the trick, and it worked for me

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

回答8:

Dear all no need to take tabindex="-1" out there simple CSS solution. Here we go:

.page-body .select2-drop {z-index: 10052;}
.select2-drop-mask {z-index: 10052;}

And you are done. :)

回答9:

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

Above code works for me, try this.

回答10:

Found the issue!

Actually I was opening modal using html attributes on by button like

 data-target="#modalAttachment"

while I should use javascript code to open the modal to make enforceFocus change takes affect when I started using this to open the modal, enforceFocus function changed worked

$('#modalAttachment').modal('show');

Thanks!

来源：https://stackoverflow.com/questions/20835872/select2-not-working-inside-bootstrap-modal

标签

jquery-select2