Is there any way to identify what is triggering the select2 closing event?

Question

Is there any way to identify what is triggering the select2:closing event handler?

More specifically, I want to be able to identify if the closing event was triggered because

1. The user selected a value in the dropdown
2. The user clicked on an area outside of the dropdown
3. The user clicked on the select element ( Which is responsible for displaying the dropdown for the second time without selecting an option in the dropdown)

Based on what I have found, the event only contains information about the target select2 that it is affecting and doesn't have any information about the event that triggered it.

Answer 1

Rather than use a single event, use a different event depending on what you want to know. You can always combine these into a single event handler.

From Select2 Events

1. Used selected a value: select2:select

Triggered whenever a result is selected

2. User clicked on an area outside the dropdown select2:close

Triggered whenever the dropdown is closed

3. User clicked on select again: select2:opening or select2:open

select2:opening Triggered before the dropdown is opened

select2:open Triggered whenever the dropdown is opened (has been opened)

you would then need to check if a value has already been selected, but there's never a difference between a value pre-selected (on load, when the html is rendered) and a value that the user had previously selected. To know if it's a "second time" (rather than just opening with a value selected) you would also have to record that the dropdown was opened for a "first time".

4. (bonus) User clicked on a selected value (for the second time) select2:unselect

Triggered whenever a selection is removed

---

The exact use-case for (3) will determine whether to use select2:opening (before it's been opened) or select2:open (after it's been opened)

Here's an example that only allows the user to open the drop down twice - after that it's blocked from being opened:

$('.select2').select2();

$(document).on('select2:opening', function(event) {

  // get the open count from "this" select
  // so each select has its own count
  var openCount = $(this).data("opencount") || 0;

  // check if this is the "third" time (allow it to be opened twice)
  // could just as easily use ||1 above or >0 for "second time"
  if (openCount > 1)
    return false;

  // store on "this" select the open count
  $(this).data("opencount", ++openCount);
});

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

<select class="select2" multiple>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>