Select2 doesn t work when embedded in a bootstrap modal

Question

When I use a select2  input  in bootstrap modal  I can t type anything into it  It s like disabled  Outside the modal select2 works fine     Working example  http   jsfiddle net byJy8 1  code    lt  -- Modal -- gt   lt div id  myModal  class  modal hide fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt     lt div class  modal-header  gt       lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt       lt h3 id  myModalLabel  gt Panel lt  h3 gt     lt  div gt     lt div class  modal-body  style  max-height  800px  gt     lt form class  form-horizontal  gt    lt  -- Text input-- gt   lt div class  control-group  gt     lt label class  control-label  for  vdn number  gt Numer lt  label gt     lt div class  controls  gt        lt  -- seleect2 -- gt       lt input name  vdn number  type  hidden  id  vdn number   class  input-large  required       gt     lt  div gt   lt  div gt      lt  div gt     lt div class  modal-footer  gt       lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt       lt button class  btn btn-primary  gt Save changes lt  button gt     lt  div gt   lt  div gt    and 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                         answers   here you can find a quick fix  and here is  the right way   Select2 doesn  39 t work when embedded in a bootstrap modal

User · Answer

According to the official select2 documentation this issue occurs because Bootstrap modals tend to steal focus from other elements outside of the modal.

By default Select2 attaches the dropdown menu to the element and it is considered "outside of the modal".

Instead attach the dropdown to the modal itself with the dropdownParent setting:

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

See reference: https://select2.org/troubleshooting/common-problems

User · Answer

IlceId   select2       allowClear  true      multiple  false      dropdownParent      IlceId   parent        escapeMarkup  function  m            return m               this code is working  Thank you

User · Answer

I had the same issue  updating z-index for  select2-container should do the trick  Make sure your modal s z-index is lower than select2 s    select2-container       z-index  99999      Updated  In case above code doesn t work properly  also remove tabindexes from your modal as   breq suggested

User · Answer

If you use jquery mobile popup you must rewrite  handleDocumentFocusIn function    x000D   x000D    mobile popup prototype  handleDocumentFocusIn   function e    x000D    if    e target  closest   select2-dropdown   length  return true  x000D    x000D   x000D   x000D

User · Answer

In my case i did this and it works  I use bundle to load it and in this case it worked for me     document  on  select2 select     Id Producto   function  evt          Here your code

User · Answer

Set the dropdownParent  I had to set it on  modal-content within the modal or the text would end up centered       product id   select2       dropdownParent      myModal  modal-content

User · Answer

I found a solution to this on github for select2 https   github com ivaynberg select2 issues 1436 For bootstrap 3  the solution is    fn modal Constructor prototype enforceFocus   function        Bootstrap 4 renamed the enforceFocus method to  enforceFocus  so you ll need to patch that instead    fn modal Constructor prototype  enforceFocus   function        Explanation copied from link above   Bootstrap registers a listener to the focusin event which checks whether the focused element is either the overlay itself or a descendent of it - if not it just refocuses on the overlay  With the select2 dropdown being attached to the body this effectively prevents you from entering anything into the the textfield  You can quickfix this by overwriting the enforceFocus function which registers the event on the modal

User · Answer

If you have a problem with the iPad keyboard which hide the bootstrap modal while clicking on the select2 input  you can resolve this by adding the following rule after the initialization of the select2 input    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     Taken from https   github com angular-ui bootstrap issues 1812 issuecomment-135119475  EDIT  If your options are not shown properly  you need to use the dropdownParent attribute when initializing select2        select2   select2       dropdownParent      YOURMODALID         Good luck

User · Answer

to use bootstrap 4 0 with server-side ajax or json data inline   you need to add all of this     fn modal Constructor prototype  enforceFocus   function         and then when modal is open  create the select2        when modal is open       modal   on  shown bs modal   function                     select   select2

User · Answer

Answer that worked for me found here  https   github com select2 select2-bootstrap-theme issues 41     select   select2       dropdownParent      my amazing modal         Also doesn t require removing the tabindex

User · Answer

Jus use this code on Document read      fn modal Constructor prototype enforceFocus   function

User · Answer

change select2 css file  z-index  9998      z-index  9999      z-index  10000    to  z-index  10000      z-index  10001      z-index  10002

User · Answer

For Select2 v4   Use dropdownParent to attach the dropdown to the modal dialog  rather than the HTML body     lt  -- Modal -- gt   lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  gt     lt div class  modal-dialog  role  document  gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt           lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt         lt  div gt         lt div class  modal-body  gt           lt select id  select2insidemodal  multiple  multiple  gt             lt option value  AL  gt Alabama lt  option gt                             lt option value  WY  gt Wyoming lt  option gt           lt  select gt         lt  div gt         lt div class  modal-footer  gt           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt     lt script gt     document  ready function           select2insidemodal   select2       dropdownParent      myModal               lt  script gt    This will attach the Select2 dropdown so it falls within the DOM of the modal rather than to the HTML body  the default   See https   select2 org dropdown dropdown-placement

User · Answer

Just to understand better how tabindex elements works to complete accepted answer       The tabindex global attribute is an integer indicating if the element can take input focus  is focusable   if it should participate to sequential keyboard navigation  and if so  at what position  It can take several values     nbsp  nbsp -a negative value means that the element should be focusable  but should not be reachable via sequential keyboard navigation        nbsp  nbsp -0 means that the element should be focusable and reachable via sequential keyboard navigation  but its relative order is defined by the platform convention        nbsp  nbsp -a positive value means should be focusable and reachable via sequential keyboard navigation  its relative order is defined by the value of the attribute  the sequential follow the increasing number of the tabindex  If several elements share the same tabindex  their relative order follows their relative position in the document    from   Mozilla Devlopper Network

User · Answer

select2-close-mask      z-index  2099     select2-dropdown      z-index  3051      This is my solution with select2 4 0 0  Just override the css right below the select2 css import   Please make sure the z-index is greater than your dialog or modal  I just add 2000 on the default ones  Cause my dialogs  z-index are about 1000

User · Answer

Ok  I ve got it to work   change   lt div id  myModal  class  modal hide fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt     lt div class  modal-header  gt       lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt       lt h3 id  myModalLabel  gt Panel lt  h3 gt     lt  div gt     lt div class  modal-body  style  max-height  800px  gt    to   lt div id  myModal  class  modal hide fade  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt     lt div class  modal-header  gt       lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt       lt h3 id  myModalLabel  gt Panel lt  h3 gt     lt  div gt     lt div class  modal-body  style  max-height  800px  gt     remove  tabindex  -1  from modal

User · Answer

If you using stisla and use firemodal       modal-create-promo   click     gt       setTimeout     gt               fire-modal-1   removeAttr  tabindex                        quot  modal-create-promo quot   fireModal                It s work for me

User · Answer

you can call select2 trigger again inside your   document       select2   select2                    width   120

User · Answer

In my case I had the same problem with two modals and all was resolved using       select2   each function            this  select2   dropdownParent    this  parent           As in the project issue  41 an user said

User · Answer

I solved this generally in my project by overloading the select2-function   Now it will check if there is no dropdownParent and if the function is called on an element that has a parent of the type div modal   If so  it will add that modal as the parent for the dropdown   This way  you don t have to specify it every time you create a select2-input-box    function        var oldSelect2   jQuery fn select2      jQuery fn select2   function             const modalParent   jQuery this  parents  div modal   first            if  arguments length     0  amp  amp  modalParent length  gt  0                arguments     dropdownParent  modalParent              else if  arguments length     1                      amp  amp  typeof arguments 0       object                       amp  amp  typeof arguments 0  dropdownParent      undefined                       amp  amp  modalParent length  gt  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

User · Answer

I have the same problem with the select2 in bootstrap modal  and the solution was to remove the overflow-y  auto  and overflow  hidden  from  modal-open and  modal classes  Here is the example of using jQuery to remove the overflow-y       modal   css  overflow-y   visible        modal   css  overflow   visible

User · Answer

Just remove tabindex  -1  and add style overflow hidden  Here is an example    lt div id  myModal  class  modal fade  role  dialog  style  overflow hidden   gt       lt  ---content modal here -- gt   lt  div gt

User · Answer

modal   on  shown bs modal   function  e          this  find   select2me   select2           dropdownParent    this  find   modal-content

User · Answer

I had a semi-related issue in an application so I ll put in my 2c    I have multiple modals with forms containing select2 widgets   Opening modal A  then another modal inside modal A  would cause select2 widgets inside modal B to disappear and fail to initialize     Each of these modals were loading the forms via ajax   The solution was to remove the forms from the dom when closing a modal     document  on  hidden bs modal     modal   function e           make sure we don t leave any select2 widgets around        this  find   my-form   remove

User · Answer

I just get it working by including select2 min css  Try iy out  My modal html of bootstrap 3 is   lt div id  changeTransportUserRequestPopup  class  modal fade  role  dialog  gt       lt div class  modal-dialog  style  width  40  important    gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt                   lt h3 gt Warning lt  h3 gt               lt  div gt               lt div class  modal-body  id  changeTransportUserRequestPopupBody  gt                   lt select id  cbTransport  class  js-example-basic-single  name  cbTransport  style  width 100  important   gt  lt  select gt               lt  div gt               lt div class  modal-footer  gt                   lt button id  noPost  class  btn btn-default  name  postConfirm  value  false  data-dismiss  modal  gt Cancel lt  button gt                   lt button type  submit  id  yesChangeTransportPost  class  btn btn-success  name  yesChangeTransportPost  value  true  data-dismiss  modal  gt Yes lt  button gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

This Problem Sloved Working For Me Single Jquery Function      myModal  select2   each function          var  p     this  parent          this  select2          dropdownParent   p

User · Answer

I had a similar problem and I fixed with         CompId   select2                 dropdownParent      AssetsModal            and modal with select      lt div class  quot modal fade quot  id  quot AssetsModal quot  role  quot dialog quot       aria-labelledby  quot exampleModalCenterTitle quot       aria-hidden  quot true quot   style  quot overflow hidden  quot   gt   lt div class  quot modal-dialog modal-dialog-centered quot  role  quot document quot  gt     lt div class  quot modal-content quot  gt         lt div class  quot modal-header quot  gt               lt h5 class  quot modal-title quot  id  quot exampleModalLongTitle quot   gt               lt  h5 gt               lt button type  quot button quot  class  quot close quot  data-dismiss  quot modal quot  aria-label  quot Close quot  gt                 lt span aria-hidden  quot true quot  gt  amp times  lt  span gt               lt  button gt         lt  div gt         lt div class  quot modal-body quot  gt             lt form role  quot form quot  action  quot  action dma act documents assets insert amp Id  lt    ID  gt  quot                     method  quot post quot  name  quot dma act documents assets insert quot                     id  quot dma act documents assets insert quot  gt               lt div class  quot form-group col-sm-12 quot  gt                     lt label for  quot recipient-name quot  class  quot col-form-label quot  gt        lt  label gt                     lt span style  quot color  red quot  gt   lt  span gt                             lt select class  quot form-control js-example-basic-single col-sm-12 quot                                    name  quot CompId quot  id  quot CompId quot  gt                                     lt option gt  lt  option gt                             lt  select gt                 lt  div gt             lt  form gt         lt  div gt     lt  div gt   lt  div gt    but I don t know why the select menu is smaller than other fields  and it starting like that when start using select2  When I remove it  all is ok  Is there some one to share some experince about that  Thanks

User · Answer

Okay  I know I m late to the party  But let me share with you what worked for me  The tabindex and z-index solutions did not work for me   Setting the parent of the select element worked as per the common problems listed on select2 site

User · Answer

Based on  pymarco answer I wrote this solution  it s not perfect but solves the select2 focus problem and maintain tab sequence working inside 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  amp  amp   this  element has e target  length  amp  amp     e target  closest   select2-dropdown   length                    this  element trigger  focus                            this

User · Answer

i had this problem before   i am using yii2 and i solved it this way     fn modal Constructor prototype enforceFocus     noop

[jquery] Select2 doesn't work when embedded in a bootstrap modal

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to jquery-select2