From d8dca5f1286f1ecf28f90d0dacbaeb277227b5e6 Mon Sep 17 00:00:00 2001 From: Marc-Andre Lafortune Date: Sun, 23 Oct 2016 22:45:39 -0400 Subject: [PATCH] Trigger 'input' event before 'change' events --- src/js/select2/compat/inputData.js | 6 +-- src/js/select2/core.js | 2 +- src/js/select2/data/select.js | 10 ++--- src/js/select2/selection/allowClear.js | 4 +- tests/data/select-tests.js | 52 ++++++++++++++++++++------ 5 files changed, 51 insertions(+), 23 deletions(-) diff --git a/src/js/select2/compat/inputData.js b/src/js/select2/compat/inputData.js index 6e1dee2614..cd58c5c945 100644 --- a/src/js/select2/compat/inputData.js +++ b/src/js/select2/compat/inputData.js @@ -65,13 +65,13 @@ define([ }); this.$element.val(data.id); - this.$element.trigger('change'); + this.$element.trigger('input').trigger('change'); } else { var value = this.$element.val(); value += this._valueSeparator + data.id; this.$element.val(value); - this.$element.trigger('change'); + this.$element.trigger('input').trigger('change'); } }; @@ -94,7 +94,7 @@ define([ } self.$element.val(values.join(self._valueSeparator)); - self.$element.trigger('change'); + self.$element.trigger('input').trigger('change'); }); }; diff --git a/src/js/select2/core.js b/src/js/select2/core.js index 92084143ac..07a91c67eb 100644 --- a/src/js/select2/core.js +++ b/src/js/select2/core.js @@ -556,7 +556,7 @@ define([ }); } - this.$element.val(newVal).trigger('change'); + this.$element.val(newVal).trigger('input').trigger('change'); }; Select2.prototype.destroy = function () { diff --git a/src/js/select2/data/select.js b/src/js/select2/data/select.js index a897198b57..a384735025 100644 --- a/src/js/select2/data/select.js +++ b/src/js/select2/data/select.js @@ -36,7 +36,7 @@ define([ if ($(data.element).is('option')) { data.element.selected = true; - this.$element.trigger('change'); + this.$element.trigger('input').trigger('change'); return; } @@ -57,13 +57,13 @@ define([ } self.$element.val(val); - self.$element.trigger('change'); + self.$element.trigger('input').trigger('change'); }); } else { var val = data.id; this.$element.val(val); - this.$element.trigger('change'); + this.$element.trigger('input').trigger('change'); } }; @@ -79,7 +79,7 @@ define([ if ($(data.element).is('option')) { data.element.selected = false; - this.$element.trigger('change'); + this.$element.trigger('input').trigger('change'); return; } @@ -97,7 +97,7 @@ define([ self.$element.val(val); - self.$element.trigger('change'); + self.$element.trigger('input').trigger('change'); }); }; diff --git a/src/js/select2/selection/allowClear.js b/src/js/select2/selection/allowClear.js index 0de5b9bbbd..5f7d33e42c 100644 --- a/src/js/select2/selection/allowClear.js +++ b/src/js/select2/selection/allowClear.js @@ -74,7 +74,7 @@ define([ } } - this.$element.trigger('change'); + this.$element.trigger('input').trigger('change'); this.trigger('toggle', {}); }; @@ -97,7 +97,7 @@ define([ return; } - var removeAll = this.options.get('translations').get('removeAllItems'); + var removeAll = this.options.get('translations').get('removeAllItems'); var $remove = $( '' + diff --git a/tests/data/select-tests.js b/tests/data/select-tests.js index b59c6d4bec..544a51e1ef 100644 --- a/tests/data/select-tests.js +++ b/tests/data/select-tests.js @@ -167,12 +167,14 @@ test('duplicates - single - same id on select triggers change', var data = new SelectData($select, data); var second = $('#qunit-fixture .duplicates option')[2]; - var changeTriggered = false; + var changeTriggered = false, inputTriggered = false; assert.equal($select.val(), 'one'); $select.on('change', function () { - changeTriggered = true; + changeTriggered = inputTriggered; + }).on('input', function() { + inputTriggered = true; }); data.select({ @@ -187,9 +189,14 @@ test('duplicates - single - same id on select triggers change', 'The value never changed' ); + assert.ok( + inputTriggered, + 'The input event should be triggered' + ); + assert.ok( changeTriggered, - 'The change event should be triggered' + 'The change event should be triggered after the input event' ); assert.ok( @@ -205,12 +212,14 @@ test('duplicates - single - different id on select triggers change', var data = new SelectData($select, data); var second = $('#qunit-fixture .duplicates option')[2]; - var changeTriggered = false; + var changeTriggered = false, inputTriggered = false; $select.val('two'); $select.on('change', function () { - changeTriggered = true; + changeTriggered = inputTriggered; + }).on('input', function() { + inputTriggered = true; }); data.select({ @@ -225,9 +234,14 @@ test('duplicates - single - different id on select triggers change', 'The value changed to the duplicate id' ); + assert.ok( + inputTriggered, + 'The input event should be triggered' + ); + assert.ok( changeTriggered, - 'The change event should be triggered' + 'The change event should be triggered after the input event' ); assert.ok( @@ -243,12 +257,14 @@ function (assert) { var data = new SelectData($select, data); var second = $('#qunit-fixture .duplicates-multi option')[2]; - var changeTriggered = false; + var changeTriggered = false, inputTriggered = false; $select.val(['one']); $select.on('change', function () { - changeTriggered = true; + changeTriggered = inputTriggered; + }).on('input', function() { + inputTriggered = true; }); data.select({ @@ -263,9 +279,14 @@ function (assert) { 'The value now has duplicates' ); + assert.ok( + inputTriggered, + 'The input event should be triggered' + ); + assert.ok( changeTriggered, - 'The change event should be triggered' + 'The change event should be triggered after the input event' ); assert.ok( @@ -281,12 +302,14 @@ function (assert) { var data = new SelectData($select, data); var second = $('#qunit-fixture .duplicates-multi option')[2]; - var changeTriggered = false; + var changeTriggered = false, inputTriggered = false; $select.val(['two']); $select.on('change', function () { - changeTriggered = true; + changeTriggered = inputTriggered; + }).on('input', function() { + inputTriggered = true; }); data.select({ @@ -301,9 +324,14 @@ function (assert) { 'The value has the new id' ); + assert.ok( + inputTriggered, + 'The input event should be triggered' + ); + assert.ok( changeTriggered, - 'The change event should be triggered' + 'The change event should be triggered after the input event' ); assert.ok(