Trigger 'input' event before 'change' events

select2 · Oct 24, 2016 · 7fc446c · 7fc446c
1 parent 563198a
commit 7fc446c
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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(