On removing selected item(using backspace), dropdown list is displaying the removed item only in select2 rails

Question

I have a multi-select, select2 dropdown in rails. Currently when I select some 2-3 options from the lis and when i click on backspace the selected element is getting deleted and the dropdown list with all the options are getting displayed. But when I type some initials and then select from the list and then click on backspace the dropdown list is populating the just deleted option. Is there a way where in on typing and then selecting, the dropdown list will display the full list upon clicking on backspace ?? The code that I am using is(according to https://github.com/select2/select2/issues/3354#issuecomment-132389291):

$.fn.select2.amd.require(['select2/selection/search'], function (Search) {
  var oldRemoveChoice = Search.prototype.searchRemoveChoice;
  Search.prototype.searchRemoveChoice = function () {
    oldRemoveChoice.apply(this, arguments);
    this.$search.val('');
  };

  $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
    $('#reports_employee_id').select2({
      matcher: oldMatcher(matchStart),
      templateResult: formatSearch,
      templateSelection: formatSelected,
      maximumSelectionLength: 25,
      placeholder: " "
    })
  });
});

Thanks In Advance !!

Soumyadip Chakraborty Soumyadip Chakraborty · Accepted Answer · 2020-04-17T11:29:02

Ok I understood the problem to this. I needed to handle the change.Below I am attaching the updated code for reference.

$.fn.select2.amd.require(['select2/selection/search'], function (Search) {
  var oldRemoveChoice = Search.prototype.searchRemoveChoice;
  Search.prototype.searchRemoveChoice = function () {
    oldRemoveChoice.apply(this, arguments);
    this.$search.val('');
    this.handleSearch();
  };

  $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
    $('#reports_employee_id').select2({
      matcher: oldMatcher(matchStart),
      templateResult: formatSearch,
      templateSelection: formatSelected,
      maximumSelectionLength: 25,
      placeholder: " "
    })
  });
});

Just needed add this line:

this.handleSearch();

and it works as expected.

On removing selected item(using backspace), dropdown list is displaying the removed item only in select2 rails

1 Answers