From 04d3a5da667ca50a68455bd806c39baf1578fd0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=9Amia=C5=82ek?= 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 | 7 +- tests/selection/allowClear-tests.js | 88 ++++++++++++++++++++++++++ 4 files changed, 105 insertions(+), 4 deletions(-) diff --git a/src/js/select2/core.js b/src/js/select2/core.js index 4ba06edb..1445f17b 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 b2e890e5..a7bbc2ea 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 a91e9c57..0f59822b 100644 --- a/src/js/select2/selection/eventRelay.js +++ b/src/js/select2/selection/eventRelay.js @@ -9,10 +9,13 @@ 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 c64fa61d..f33fc0e5 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, $('
')); + + $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, $('
')); + + $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');