Fix value not being cleared when unselect event is emitted

Fixes select2#5049.

Author: gronostajo

src/js/select2/selection/allowClear.js

@@ -45,6 +45,9 @@ define([
 
     var data = $clear.data('data');
 
+    var previousVal = this.$element.val();
+    this.$element.val(this.placeholder.id);
+
     for (var d = 0; d < data.length; d++) {
       var unselectData = {
         data: data[d]
@@ -56,11 +59,12 @@ define([
 
       // If the event was prevented, don't clear it out.
       if (unselectData.prevented) {
+        this.$element.val(previousVal);
         return;
       }
     }
 
-    this.$element.val(this.placeholder.id).trigger('change');
+    this.$element.trigger('change');
 
     this.trigger('toggle', {});
   };

tests/selection/allowClear-tests.js

@@ -43,7 +43,7 @@ test('clear is not displayed for single placeholder', function (assert) {
 
 test('clear is not displayed for multiple placeholder', function (assert) {
   var selection = new AllowClearPlaceholder(
-    $('#qunit-fixture .single-with-placeholder'),
+    $('#qunit-fixture .multiple'),
     allowClearOptions
   );
 
@@ -90,7 +90,7 @@ test('clicking clear will set the placeholder value', function (assert) {
 
   var $selection = selection.render();
 
-  selection.bind(container, $('<div></div'));
+  selection.bind(container, $('<div></div>'));
 
   $element.val('One');
   selection.update([{
@@ -109,7 +109,7 @@ test('clicking clear will set the placeholder value', function (assert) {
 });
 
 test('clicking clear will trigger the unselect event', function (assert) {
-  assert.expect(3);
+  assert.expect(4);
 
   var $element = $('#qunit-fixture .single-with-placeholder');
 
@@ -121,7 +121,7 @@ test('clicking clear will trigger the unselect event', function (assert) {
 
   var $selection = selection.render();
 
-  selection.bind(container, $('<div></div'));
+  selection.bind(container, $('<div></div>'));
 
   $element.val('One');
   selection.update([{
@@ -143,16 +143,20 @@ test('clicking clear will trigger the unselect event', function (assert) {
     assert.equal(
       ev.data.id,
       'One',
-      'The previous object should be unselected'
+      'The data should be the unselected object'
+    );
+
+    assert.equal(
+      $element.val(),
+      'placeholder',
+      'The previous value should be unselected'
     );
   });
 
   var $remove = $selection.find('.select2-selection__clear');
   $remove.trigger('mousedown');
 });
 
-
-
 test('preventing the unselect event cancels the clearing', function (assert) {
   var $element = $('#qunit-fixture .single-with-placeholder');
 
@@ -164,7 +168,7 @@ test('preventing the unselect event cancels the clearing', function (assert) {
 
   var $selection = selection.render();
 
-  selection.bind(container, $('<div></div'));
+  selection.bind(container, $('<div></div>'));
 
   $element.val('One');
   selection.update([{
@@ -197,7 +201,7 @@ test('clear does not work when disabled', function (assert) {
 
   var $selection = selection.render();
 
-  selection.bind(container, $('<div></div'));
+  selection.bind(container, $('<div></div>'));
 
   selection.update([{
     id: 'One',