Select2 not working inside bootstrap modal

Question

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.

score 18 · Answer 1 · answered Oct 19 '17 at 07:30

18

Use bellow code. This will solve your bug.

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

answered Oct 19 '17 at 07:30

Shanka SMS

644
6
15

1

If you using this for multiple modals you can use `dropdownParent: $(".modal-body , .modal-body1")` – Isuru Dilshan Mar 20 '21 at 16:00

score 16 · Answer 2 · answered Feb 24 '14 at 14:57

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

score 6 · Answer 3 · edited Aug 03 '17 at 06:13

6

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.

edited Aug 03 '17 at 06:13

Rob

26,989
16
82
98

answered Aug 03 '17 at 06:08

Nikit Barochiya

971
11
14

1

Are there any downsides to this approach? – João Amaro Mar 09 '18 at 19:46

score 3 · Answer 4 · edited Aug 04 '17 at 07:35

3

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

edited Aug 04 '17 at 07:35

Ignatius

1,167
2
21
30

answered Aug 03 '17 at 16:00

Elvis Segovia

31
1

score 3 · Answer 5 · answered Nov 06 '20 at 13:44

3

I was searching for it and came across this one:

Worked for me on document ready for all select2

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

Taken from: https://github.com/select2/select2-bootstrap-theme/issues/41

answered Nov 06 '20 at 13:44

Umar Niazi

476
5
14

This worked. I added an `id` to the main container and used the same as the answer. `dropdownParent`: $('#new_appended_container') – Lizesh Shakya May 25 '21 at 09:33

score 2 · Answer 6 · answered May 17 '17 at 10:14

2

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

answered May 17 '17 at 10:14

Amberish Raj

21
3

score 1 · Answer 7 · answered May 16 '17 at 16:09

1

this will do the trick, and it worked for me

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

answered May 16 '17 at 16:09

yousef

1,240
12
13

Vitor Luiz Rubio · Answer 8 · 2019-02-14T21:08:18.233

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

score 1 · Answer 9 · edited Oct 24 '19 at 12:51

1

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

Above code works for me, try this.

edited Oct 24 '19 at 12:51

Ioannis Barakos

1,319
1
11
16

answered Oct 24 '19 at 11:12

kaushal barot

11
1

score 1 · Answer 10 · answered Feb 09 '22 at 12:01

1

Just use data attribute settings: data-dropdown-parent="#bs-modal-id"

<select class="form-control" data-dropdown-parent="#bs-modal-id"></select>

answered Feb 09 '22 at 12:01

skwal

11
2

easy solution works on laravel 8 – Mohamed Raza Apr 05 '23 at 17:07

score 0 · Answer 11 · answered May 03 '18 at 19:56

0

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. :)

answered May 03 '18 at 19:56

Hercules S.

363
3
13

Gani Rambonceng · Answer 12 · 2021-03-15T12:38:39.027

$('.select2-with-search').select2({
      placeholder: 'Choose one',
      searchInputPlaceholder: 'Search options',
   dropdownParent: $('.modal')
   });

us this <div class="modal"

<div class="modal fade" id="createModal" role="dialog" aria-hidden="true"  data-backdrop="">
   <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">

and use this <select class="form-control select2-with-search"

<select class="form-control wd-250 select2-with-search">
                     <option label="Choose one"></option>
                     <option value="Firefox">Firefox</option>
                     <option value="Chrome">Chrome</option>
                     <option value="Safari">Safari</option>
                     <option value="Opera">Opera</option>
                     <option value="Internet Explorer">Internet Explorer</option>
                  </select>

score 0 · Answer 13 · answered May 16 '21 at 07:04

All answers here didn't work for me, but this one is good:

  $('#modal-window').on('shown.bs.modal', function (e) {
    $("#select-box").select2({
      placeholder: "Select...",
      theme: "bootstrap",
      language: "en"
    });
  })

Wrap it inside

$(document).on('ready turbolinks:load', function() {...}

if you use turbolink.

score 0 · Answer 14 · answered Sep 27 '22 at 12:31

In my case i resolve this calling select2 on action modal show like this:

    window.addEventListener('showModal', event => {
        $('#actionModal').modal('show');
        $('#permissaoList').select2({
            width: '100%'
        });
    });

score 0 · Answer 15 · answered Dec 09 '22 at 05:12

I was facing with the same problem I just add the below code and it worked

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

Select2 not working inside bootstrap modal

15 Answers15

Linked