Trying to stop event propagation of Select2 multi-select option remove
<p>My UI has some dropdowns created from Bootstrap, which I am using to contain some form elements. I am preventing the dropdown from closing with the solution I found here, which is almost perfect:
<a href="https://stackoverflow.com/questions/25089297/twitter-bootstrap-avoid-dropdown-menu-close-on-click-inside">Avoid dropdown menu close on click inside</a></p>

<p>The remaining issue is the specific instance where I use a Select2 mutliple select and <em>remove</em> an option. The act of removing appears to follow a different event chain as it closes the dropdown. My assumption is that the event is propagating up to a parent element, but I am seemingly unable to determine which.</p>

<p>Here is a <a href="https://jsfiddle.net/ju2mgcL6/1/" rel="nofollow noreferrer" title="JSFiddle">JSFiddle</a> to illustrate the issue. Select an option, and then remove it to see what happens. Below is the code as required when including a jsfiddle. It's pared down from my actual code, of course, but represents the issue at least.</p>

<pre><code>$('body').on('click', '.dropdown .cycle-element', function(e) {
  $(this).parent().toggleClass('open');
});

$('body').on('click', function(e) {
  if (!$('.dropdown').is(e.target) &amp;&amp; $('.dropdown').has(e.target).length === 0 &amp;&amp; $('.open').has(e.target).length === 0) {
    $('.dropdown').removeClass('open');
  }
});

$('.dependency-select').select2();
</code></pre>