Prevent select2 from opening when a tag is clicked

问题

This question evolved into preventing the dropdown from opening on enter key press. As you can see, my ugly solution closes the dropdown with a setTimeout when you press enter when a tag input has focus. How can I prevent it from opening at all on enter, instead of closing it after it has opened?

Here are some events that may be useful: https://select2.org/programmatic-control/events

var tagClick = false;
$(document).on('mousedown touchstart', '.tag', function(e) {
  var $self = $(this);
  tagClick = true;
});
$(document).on('click', '.tag', function(e) {
  var $self = $(this);
  var $input = $self.find('input');
  $input.select();
});
$(document).on('blur', '.tag input', function(e) {
  var $self = $(this);
  $self.attr('value', $self.val());
  setTimeout(function() {
    $(".tags").select2('close');
  }, 100);
  // Save to db here
});
$(document).on('keydown', '.tag input', function(e) {
	var nl = e.keyCode == 13; // is enter?
	var $self = $(this);
	if( nl )
	{
		$self.blur();
	}
});

$(".tags").select2({
    templateSelection: function(argSelection)
    {
      return $.parseHTML('<span class="tag">'+(argSelection.name || argSelection.text)+'<input type="text" value="" /></span>');
    },
  tags: true,
  width: '100%'
})
.on('select2:opening', function (e) {
  var $self = $(this);
  if( tagClick )
  {
    e.preventDefault();
    tagClick = false;
  }
})

.tag input {
  width: 50px;
  height: 10px;
  margin-left: 5px;
}
.tag input[value=""]:not(:focus) {
  width: 0;
  margin-left: 0;
  background: transparent;
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<select class="tags" multiple="multiple">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

回答1:

After reading some documentation about the event listeners, I wrote this code that works only when you click on the cross to remove a tag, please specify if you wish to prevent the dropdown if the whole tag gets clicked and I will look on it, here is the code, basically, we're hearing for select2:unselecting event and preventing the drop-down menu to show by preventing its proper opening event to trigger :

$(".tags").on('select2:unselecting', function (e) { 
  $(".tags").on('select2:opening', function (e) {
    e.preventDefault();
    $(".tags").off('select2:opening');
  });
});

Working snippet below :

$(".tags").select2({
  tags: true,
  width: '100%'
});

$(".tags").on('select2:unselecting', function (e) {	
  $(".tags").on('select2:opening', function (e) {
    e.preventDefault();
    $(".tags").off('select2:opening');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<select class="tags" multiple="multiple">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

来源：https://stackoverflow.com/questions/56194880/prevent-select2-from-opening-when-a-tag-is-clicked