Select2 dropdown is not working properly in Bootstrap popover

Question

I'm trying to place select2 dropdown in my popover - select2 dropdown is rendering normally when I open popover for the first time, but if I close it and open again - it renders 2 select2 dropdowns, one of which is unclickable:

I've already tried z-index solution from here and the solution from here, and they didn't work. I've also read that select2 doesn't work properly in Bootstrap modal's and also tried to render it with dropdownParent property - didn't work too.

My HTML:

<div class="actions-row mb-5">
   <button type="button" class="btn popover-toggle add-to-program-popover" data-placement="bottom">
   Add to program
   </button>
   <div class="program-container" style="display: none">
      <select name="movement-program-select" class="movement-program-select">
         <option value=""></option>
         <option value="Program 1">Program 1</option>
         <option value="Program 2">Program 2</option>
         <option value="Program 3">Program 3</option>
      </select>
      <i class="fa fa-floppy-o add-to-program" aria-hidden="true"></i>
      <hr>
      <a class="create-new-program">
      <i class="fa fa-plus-square-o add-item"></i>
      Create new program</a>
   </div>
</div>

This is my JS code:

 $('button.add-movement-to-program').on('click', function(e) {
   $('.add-to-program-table-container').show();
 });

 $('button.add-to-program-popover').popover({
   container: 'main',
   html: true,
   content: function() {
     return $('.program-container').html();
   }
 });

 $('button.add-to-program-popover').click(function() {
  // console.log(1);
  // if (!$('.movement-program-select').hasClass("select2-hidden-accessible")) {
  // console.log(2);
  $('.movement-program-select').select2({
    container: 'body',
    width: "100%",
    dropdownParent: $('.popover-content')
  });
  // }
});

Are there any other variants on how it can be fixed?

Here is a link to my JSFiddle: http://jsfiddle.net/fpk047rh/1/

Crafted Pod · Answer 1 · 2020-05-21T13:06:16.493

You want to use the show event to target the select element inside your popover.

Here's an example

HTML:

<div id="wrapper">
  <button type="button" id="myButton" class="btn btn-lg">Click to toggle popover</button>
  <div id="form" style="display:none;">
    <select class="select-program" name="program">
      <option value=""></option>
      <option value="Program 1">Program 1</option>
      <option value="Program 2">Program 2</option>
      <option value="Program 3">Program 3</option>
    </select>
    <div class="add-program"></div>
  </div>
</div>

JavaScript

$(function () {
  $("#myButton").popover({
    html: true,
    content: $("#form").html(),
    placement: "bottom"
  });

  $("#myButton").on("show.bs.popover", function () {
    setTimeout(() => {
      $(".popover-content .select-program")
        .select2({
          dropdownParent: $(".popover-content")
        })
        .on("select2:select", function (e) {
          var data = e.params.data;
          $(".popover-content .add-program").html("Add " + data.text);
        });
    }, 0);
  });
});

More information can be found here.

CodePen

score 0 · Answer 2 · answered May 21 '20 at 15:21

I've fixed it with inserted.bs.popover event:

$('button.add-to-program-popover').popover({
  container: 'body',
  html: true,
  content: function() {
    return $('.program-container').html();
  }
});

$('button.add-to-program-popover').on('inserted.bs.popover', function () {
  $('div.popover-content select').select2({
    dropdownParent: $('.popover-content')
  });
});

Also, the select box that I'm transforming to select2 dropdown is the one that is inside popup container ($('div.popover-content select'))

Select2 dropdown is not working properly in Bootstrap popover

2 Answers2