From f36115ee14453936610c5acfa65e31671469a014 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=9Amia=C5=82ek?= <admin@avensome.net>
Date: Tue, 26 Sep 2017 17:19:54 +0200
Subject: [PATCH] Add dedicated event for clearing

Closes #4929, #5045.
---
 src/js/select2/core.js                 |  3 +-
 src/js/select2/selection/allowClear.js | 11 +++-
 src/js/select2/selection/eventRelay.js |  5 +-
 tests/selection/allowClear-tests.js    | 88 ++++++++++++++++++++++++++
 4 files changed, 103 insertions(+), 4 deletions(-)

diff --git a/src/js/select2/core.js b/src/js/select2/core.js
index 4ba06edb3e..1445f17b76 100644
--- a/src/js/select2/core.js
+++ b/src/js/select2/core.js
@@ -417,7 +417,8 @@ define([
       'open': 'opening',
       'close': 'closing',
       'select': 'selecting',
-      'unselect': 'unselecting'
+      'unselect': 'unselecting',
+      'clear': 'clearing'
     };
 
     if (args === undefined) {
diff --git a/src/js/select2/selection/allowClear.js b/src/js/select2/selection/allowClear.js
index b2e890e56a..a7bbc2ea94 100644
--- a/src/js/select2/selection/allowClear.js
+++ b/src/js/select2/selection/allowClear.js
@@ -48,8 +48,17 @@ define([
     var previousVal = this.$element.val();
     this.$element.val(this.placeholder.id);
 
+    var unselectData = {
+      data: data
+    };
+    this.trigger('clear', unselectData);
+    if (unselectData.prevented) {
+      this.$element.val(previousVal);
+      return;
+    }
+
     for (var d = 0; d < data.length; d++) {
-      var unselectData = {
+      unselectData = {
         data: data[d]
       };
 
diff --git a/src/js/select2/selection/eventRelay.js b/src/js/select2/selection/eventRelay.js
index a91e9c5776..5e019d280c 100644
--- a/src/js/select2/selection/eventRelay.js
+++ b/src/js/select2/selection/eventRelay.js
@@ -9,10 +9,11 @@ define([
       'open', 'opening',
       'close', 'closing',
       'select', 'selecting',
-      'unselect', 'unselecting'
+      'unselect', 'unselecting',
+      'clear', 'clearing'
     ];
 
-    var preventableEvents = ['opening', 'closing', 'selecting', 'unselecting'];
+    var preventableEvents = ['opening', 'closing', 'selecting', 'unselecting', 'clearing'];
 
     decorated.call(this, container, $container);
 
diff --git a/tests/selection/allowClear-tests.js b/tests/selection/allowClear-tests.js
index c64fa61d3a..f33fc0e56b 100644
--- a/tests/selection/allowClear-tests.js
+++ b/tests/selection/allowClear-tests.js
@@ -190,6 +190,94 @@ test('preventing the unselect event cancels the clearing', function (assert) {
   );
 });
 
+test('clicking clear will trigger the clear event', function (assert) {
+  assert.expect(5);
+
+  var $element = $('#qunit-fixture .single-with-placeholder');
+
+  var selection = new AllowClearPlaceholder(
+    $element,
+    allowClearOptions
+  );
+  var container = new MockContainer();
+
+  var $selection = selection.render();
+
+  selection.bind(container, $('<div></div>'));
+
+  $element.val('One');
+  selection.update([{
+    id: 'One',
+    text: 'One'
+  }]);
+
+  selection.on('clear', function (ev) {
+    assert.ok(
+      'data' in ev && ev.data,
+      'The event should have been triggered with the data property'
+    );
+
+    assert.ok(
+      $.isArray(ev.data),
+      'The data should be an array'
+    );
+
+    assert.equal(
+      ev.data.length,
+      1,
+      'The data should contain one item for each value'
+    );
+
+    assert.equal(
+      ev.data[0].id,
+      'One',
+      'The data should contain unselected objects'
+    );
+
+    assert.equal(
+      $element.val(),
+      'placeholder',
+      'The previous value should be unselected'
+    );
+  });
+
+  var $remove = $selection.find('.select2-selection__clear');
+  $remove.trigger('mousedown');
+});
+
+test('preventing the clear event cancels the clearing', function (assert) {
+  var $element = $('#qunit-fixture .single-with-placeholder');
+
+  var selection = new AllowClearPlaceholder(
+    $element,
+    allowClearOptions
+  );
+  var container = new MockContainer();
+
+  var $selection = selection.render();
+
+  selection.bind(container, $('<div></div>'));
+
+  $element.val('One');
+  selection.update([{
+    id: 'One',
+    text: 'One'
+  }]);
+
+  selection.on('clear', function (ev) {
+    ev.prevented = true;
+  });
+
+  var $remove = $selection.find('.select2-selection__clear');
+  $remove.trigger('mousedown');
+
+  assert.equal(
+    $element.val(),
+    'One',
+    'The placeholder should not have been set'
+  );
+});
+
 test('clear does not work when disabled', function (assert) {
   var $element = $('#qunit-fixture .single-with-placeholder');