Bootstrap select dropdown menu is closing when i'm click on popover button (inside dropdown)

Question

Sorry, I do not know English well.

I have a selectpicker with content absorption enabled and the need to enable for each dropdown menu item is a popup. The problem is that when the toggle button is clicked, the popup hides the dropdown menu associated with the item - the dropdown list of the selectpicker itself.

This is a sample code in Codepen, that I am using. For simplicity in this example i use setTimeout. Help, please, to understand.

/* push data from request */
function pushDataToDropdown() {
  let select = $('#sortByTag');
  
  let parentMarkupObj = {
    'markup': `<option>1212123</option>`
  };

  select.append(parentMarkupObj.markup);
}

/* add popover to select items */
function addOptionsDropdownToTags() {
  let allTagInFilter = $('.dropdown-menu.inner li');

  allTagInFilter.append('<button type="button" class="custom-popover" data-toggle="popover" title="Popover title" data-content="Popover">Popover btn</button>');
}


window.addEventListener('DOMContentLoaded', (event) => {
  pushDataToDropdown();
  setTimeout(function() {
    $('select').selectpicker('refresh');
  }, 500)
  setTimeout(addOptionsDropdownToTags, 800);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>

<select id="sortByTag" class="selectpicker" title="some title" multiply></select>

Answer 1

Try this code

/* push data from request */
function pushDataToDropdown() {
  let select = $('#sortByTag');
  
  let parentMarkupObj = {
    'markup': `<option>1212123</option>`
  };

  select.append(parentMarkupObj.markup);
}

/* add popover to select items */
function addOptionsDropdownToTags() {
  let allTagInFilter = $('.dropdown-menu.inner li');

  /* непосредственно вставка дропдауна для каждого пункта селекта */
  allTagInFilter.append('<button type="button" class="custom-popover" data-toggle="popover" title="Popover title" data-content="Popover">Popover btn</button>');
}


window.addEventListener('DOMContentLoaded', (event) => {
  pushDataToDropdown();
  setTimeout(function() {
    $('select').selectpicker('refresh');
  }, 500)
  setTimeout(function() {
    $(document).on('click', '.bootstrap-select', function (e) {
      e.stopPropagation();
    });
  }, 650)
  setTimeout(addOptionsDropdownToTags, 800);
});

Change this code $(document).on('click', 'someyourContainer .dropdown-menu', function (e) { to $(document).on('click', '.bootstrap-select', function (e) {