Trying to stop event propagation of Select2 multi-select option remove

Question

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: Avoid dropdown menu close on click inside

The remaining issue is the specific instance where I use a Select2 mutliple select and remove 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.

Here is a JSFiddle 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.

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

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

$('.dependency-select').select2();

Flue

What are you trying to achieve ultimately? When user clicks on click me open the dropdown. when user click outside of click me close the dropdown? and Keep select options open on user selection? – Callean

jsfiddle.net/fcprvpcm is this what you are trying to achieve? – Callean

Almost. I still want it to close if I click anywhere outside the Bootstrap dropdown area. Your code doesn't seem to have the same problem I described, though I expect that is because you're only toggling the open/close on clicking the 'Click Me' text. My main issue was if you chose an option of the select and then clicked the remove x, the whole Bootstrap dropdown closes, but leaves the select options visible and floating in the middle of nowhere. Give it a try to see what I mean in my original fiddle. – Flue

Answer 1

We ran into basically the same problem. The underlying issue is that when using a select2 multiselect, the unselect event that triggers when you remove an option propagates and ends up closing the bootstrap dropdown.

Simple way to handle this is to listen for the event and stop propagation

$('your-select').on("select2:unselect", function(e) {
  if (!e.params.originalEvent) {
    return
  }

  e.params.originalEvent.stopPropagation();
});

Ardelia

My hero :) Thanks! Worked like a charm. I knew it had something to do with the bubbling but was using stopPropagation on the e., instead of the e.params.originalEvent. – Arlaarlan

Answer 2

@TheGremlyn Heres what you could do. I have not tested it completely but at first look closing select2 when div is getting closed seem to be solution.

You can close select2 as below.

$('.dependency-select').select2('close');

Heres updated code. Check it out. https://jsfiddle.net/c1ef7138

Callean