[multiselect] Disable showing dropdown when select2-selection__choice__remove is clicked

[greggulrajani]

Hello All,

Thanks for the great component. We have managed to get very close with our implementation but we are struggling with one last detail.

When the user removes a multiselect item the dropdown menu is shown. Is there a way to disable the behavior ?

Thanks in advanced.
Greg

[vooydzig]

For me quick fix/workaround/patch was stopping event propagation for click event in select2/selection/multiple.js file:

this.$selection.on('click', '.select2-selection__choice__remove',
  function (evt) {
  evt.stopPropagation();
  evt.preventDefault();
  var $remove = $(this);
  var $selection = $remove.parent();

  var data = $selection.data('data');

  self.trigger('unselect', {
    originalEvent: evt,
    data: data
  });
});

Please verify if it's acceptable solution, as I see no downside to this.

[kevin-brown]

Select2 sends the original jQuery Event with the select2:unselect event, so you can actually stop the propagation of this event without modifying core Select2 code.

http://jsbin.com/qiweciveve/1/edit?html,js,output

$("select").on("select2:unselect", function (evt) {
  if (!evt.params.originalEvent) {
    return;
  }

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

[piotr-cz]

Thanks, this is IMHO optimal way to handle this.

[leizard]

it doesn't work with xeditable select2.

    $('.x-editable').on('shown', function(e, editable) {
        editable.input.$input.on('select2:unselect', function (evt) {
            if (!evt.params.originalEvent) return;
            evt.params.originalEvent.stopPropagation();
        });
    });

[webdevperth]

Going from @kevin-brown 's solution, this will prevent the dropdown from showing in all cases when removing a multiselect item, even if you prevent the removal. Note the use of .args which is required for some reason within the unselecting event.

$("select").on('select2:unselecting', function(evt) {
  if (!confirm("Remove \"" + evt.params.args.data.text + "\"?")) evt.preventDefault();
  if (!evt.params.args.originalEvent) return;
  evt.params.args.originalEvent.stopPropagation();
});

I found this approach preferable (simpler) in my case - i.e. preventing the dropdown can be done in the unselecting event instead of handling unselect separately.

[mrafei]

@kevin-brown This is not working when multiple select2 elements are present on page. Is there a reason for this behavior?