select2: Select event is not trigger if clicked on selected item

Hello,

I searched whole Internet and I didn’t find any solution so I decided to make a new issue.

Here is example: https://codepen.io/FilipK/pen/xYWrYR

I’m using select2:select event and its triggers everytime when you select new value (that’s obv) but it doesn’t if selecting value is the same. In this example click on option with red border, close alert and then try to select this “red option” again. Event won’t start. How can I trigger it again? I tried use select2:close event but there is a problem. If we click outside select2 event triggers too and it’s not ok for me. I tried attach new event directly on select2 dropdown but it doesn’t work because you blocked it (I used $(document).on('click', '.select2-results__option', function(){});)

Any ideas?

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 22

Most upvoted comments

Ok, may I present a more hacky solution:

var prevselection = null;
 $('select')
    .select2({
         minimumResultsForSearch: Infinity, 
         templateResult: formatState,
         templateSelection: formatState
   })
   .on('select2:opening', function(event){
      prevselection = $(event.target).find(':selected');
      $('select').val(null);
   })
   .on('select2:select', function (event) {

      var _selection = $(event.target).find(':selected');
      var available = _selection.data('available');

      if(available === false){
         alert('ok')
      }
   }).on('select2:closing', function (event) {
      if(prevselection != null && $(this).val() == null){
         $(this).val($(prevselection).val())
      }
   });

scarabdesign on Mar 1, 2018

Why this was closed? It’s still the issue in the latest 4.0.12

RomanBurunkov on Jan 15, 2020

took a inspiration from @scarabdesign for a issue i had with $(select).val(null).trigger('change') that would make the text empty and set selected to false but still have the data leading to not being able to select the first option unless i selected another option

this was the $(select).select2('data')[0] format that was preventing me from selecting the first value

{
  _resultId: "select2-select-result-79vr-dev0LmVEVrF",
  disabled: false,
  element: <option value="someid" data-select2-id="17">,
  id: "someid",
  selected: false,
  text: "ItemText",
  value: "ItemText"
}

$('select')
  .on('select2:opening', function(event){
      const {selected }= $(select).select2('data')[0];
      if(!selected)
        $(id).val(null);
   })

Posting this because i wasted over 10 hours over multiple days/weeks on this “small” issue .

dimitriiBirsan on Sep 2, 2022

Well, it seems that the value of the select element itself is not important to you, right? In other words, you are taking the value you select and using it elsewhere (i mean, why else would you want to choose the same item twice). If that’s true, add this:

.on('select2:close', function (event) { this.value = null })

In the link to your example, I was able to use the select2:close to set the value to null and was able to select the item with the red border multiple times. Even if you open the dropdown and click outside, the select2:close event does trigger, but all it’s doing is resetting the selector.

scarabdesign on Mar 1, 2018