Select2 - custom input field in option items, prevent events on click

Question

I'm adding a text input to every option item in a Select2 field with "multiple" enabled and I need to prevent all of the Select2 events when the input is clicked on, both in the dropdown state and in the already selected pill result under any condition.

I've got a start from another similar question and have attempted to extend it to my needs by trying all of the Select2 events but I can't seem to block the event on every single place where the input field is showing.

$('#my-select').select2({
    width: '300px',
  multiple: true,
  templateResult: function (item) {
    var $result = $('<span>'+item.text+'</span><input class="input" placeholder="Input Text Here" onclick="test()">');
    return $result;
  },
  templateSelection: function (item) {
    var $result = $('<span>'+item.text+'</span><input class="input" placeholder="Input Text Here" onclick="test()">');
    return $result;
  }
}).on("select2:selecting", function (e) { 
        console.log("selecting",e.params.args.originalEvent);
    if (e.params.args.originalEvent.target.className === 'input') {
      e.preventDefault();
    }
  }
);

http://jsfiddle.net/6spf32Lx/

This JSFiddle will prevent the Select2 event in the dropdown option, but won't prevent it for an already selected option (where clicking the input will clear the option). Also it won't prevent the event in the pill result's input.

Rishab Rishab · Accepted Answer · 2019-10-06T06:16:45

The solution for your issue was handling the unselect event select2:unselecting which can be prevented

https://select2.org/programmatic-control/events

var stopOpening = false;

$('#my-select').select2({
	width: '300px',
  multiple: true,
  templateResult: function (item) {
    var $result = $('<span class="label">'+item.text+'</span><input class="input" placeholder="Input Text Here" onclick="test()">');
    return $result;
  },
  templateSelection: function (item) {
    var $result = $('<span  class="label">'+item.text+'</span><input class="input" placeholder="Input Text Here" onclick="test()">');
    return $result;a
  }
}).on({
    "select2:unselecting": function(e) {
        console.log("unselecting");
        if (e.params.args.originalEvent.target.className === 'input') {
            e.preventDefault();
        }
    },
    "select2:opening": function(e) {
        if(stopOpening == true){
            stopOpening = false;
            e.preventDefault();
        }
    }
});

test = function() {
    console.log("click");
    stopOpening = true;
}

.input {
  float: right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<select id="my-select">
    <option>red</option>
    <option>blue</option>
    <option>green</option>
    <option>yellow</option>
    <option>white</option>
    <option>black</option>
  </select>

Select2 - custom input field in option items, prevent events on click

1 Answers