Trigger 'input' event before 'change' events (#4649)

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');
     });
   };
 

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 () {

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');
     });
   };
 

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 = $(
       '<span class="select2-selection__clear" title="' + removeAll() +'">' +

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(