Select2 throws too many events when clearing the selection

I am using Select2 for a multi select. This select is used to filter a list.

Selecting one item rebuilds the list with that filter(s). Removing one item, again rebuild the list without that specific item. You can select more than one items.

I have attached a behaviour on the “on change” event of the select. This is going well. The list is properly rebuild when individual items are selected/deselected.

My problem is when I click on the “clear handle”, I get too many events. For example, when I have two items selected in the selector, if I click the clear button, I get 3 change events and the list is rebuild 3 times! I would like to have only one event that I can rely on when clearing the selection.

I could use the clearing or clear event, but would I need a way to rebuild the list when individual items are selected or unselected. The problem is I cannot use both… a select2:unselect/change event is triggered for every individual items that is removed from the list whether you remove individual item manually or use the clear button that removes all items automatically…

Using the clear button should trigger the change event only once!

The select2:unselect could be triggered once per item removed though…

const $field = $("[name=color]");
$field.select2({
    allowClear: true
});

$field.on("change", function(e) {
  console.log("pulldown change");
  // Use $this.val() to rebuild the list with the new filters
});
$field.on("change.select2", function(e) {
  console.log("change.select2");
});
$field.on("select2:select", function(e) {
  console.log("select2:select");
});
$field.on("select2:unselect", function(e) {
  console.log("select2:unselect");
});
$field.on("select2:clearing", function(e) {
  console.log("select2:clearing");
});
$field.on("select2:clear", function(e) {
  console.log("select2:clear");
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select class="form-control" style="width: 100%" name="color" multiple>
  <option value="blue">blue</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
</select>

Browser console after clicking the clear button. (The X on the input that replaces the select box)

select2:clearing
select2:clear
pulldown change
change.select2
select2:unselect
pulldown change
change.select2
select2:unselect
pulldown change
change.select2

In short, clicking on the clear button will trigger the clearing and the clear events, it will then trigger a change, change.select2 and a select2:unselect event for each items that was selected. It then triggers a change and a change.select2 event once more.