diff --git a/src/js/select2/compat/inputData.js b/src/js/select2/compat/inputData.js index a338bf1eea..56117cb6e4 100644 --- a/src/js/select2/compat/inputData.js +++ b/src/js/select2/compat/inputData.js @@ -64,13 +64,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'); } }; @@ -93,7 +93,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 4ba06edb3e..d7f0c0d9f8 100644 --- a/src/js/select2/core.js +++ b/src/js/select2/core.js @@ -546,7 +546,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 6865a47daf..aa6b41e8ad 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 d3502069f5..e462a91b34 100644 --- a/src/js/select2/selection/allowClear.js +++ b/src/js/select2/selection/allowClear.js @@ -60,7 +60,7 @@ define([ } } - this.$element.val(this.placeholder.id).trigger('change'); + this.$element.val(this.placeholder.id).trigger('input').trigger('change'); this.trigger('toggle', {}); }; diff --git a/tests/data/select-tests.js b/tests/data/select-tests.js index 7d1796686e..e8db0725f8 100644 --- a/tests/data/select-tests.js +++ b/tests/data/select-tests.js @@ -164,12 +164,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({ @@ -184,9 +186,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( @@ -202,12 +209,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({ @@ -222,9 +231,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( @@ -240,12 +254,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({ @@ -260,9 +276,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( @@ -278,12 +299,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({ @@ -298,9 +321,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(