Added tests for the `<input />` element

dist/js/select2.amd.full.js

@@ -5000,8 +5000,11 @@ define('select2/compat/inputData',[
     function getSelected (data, selectedIds) {
       var selected = [];
 
-      if (data.selected || $.inArray(selectedIds, data.id) !== -1) {
+      if (data.selected || $.inArray(data.id, selectedIds) !== -1) {
+        data.selected = true;
         selected.push(data);
+      } else {
+        data.selected = false;
       }
 
       if (data.children) {
@@ -5037,28 +5040,37 @@ define('select2/compat/inputData',[
           data.selected = false;
         });
       });
-    }
 
-    data.selected = true;
+      this.$element.val(data.id);
+      this.$element.trigger('change');
+    } else {
+      var value = this.$element.val();
+      value += this._valueSeparator + data.id;
 
-    this._syncValue();
+      this.$element.val(value);
+      this.$element.trigger('change');
+    }
   };
 
   InputData.prototype.unselect = function (_, data) {
+    var self = this;
+
     data.selected = false;
 
-    this._syncValue();
-  };
+    this.current(function (allData) {
+      var values = [];
 
-  InputData.prototype._syncValue = function () {
-    var self = this;
+      for (var d = 0; d < allData; d++) {
+        var item = allData[d];
 
-    this.current(function (allData) {
-      self.$element.val(
-        allData.join(
-          self._valueSeparator
-        )
-      );
+        if (data.id == item.id) {
+          continue;
+        }
+
+        values.push(data.id);
+      }
+
+      self.$element.val(values.join(self._valueSeparator));
       self.$element.trigger('change');
     });
   };

dist/js/select2.full.js

@@ -5439,8 +5439,11 @@ define('select2/compat/inputData',[
     function getSelected (data, selectedIds) {
       var selected = [];
 
-      if (data.selected || $.inArray(selectedIds, data.id) !== -1) {
+      if (data.selected || $.inArray(data.id, selectedIds) !== -1) {
+        data.selected = true;
         selected.push(data);
+      } else {
+        data.selected = false;
       }
 
       if (data.children) {
@@ -5476,28 +5479,37 @@ define('select2/compat/inputData',[
           data.selected = false;
         });
       });
-    }
 
-    data.selected = true;
+      this.$element.val(data.id);
+      this.$element.trigger('change');
+    } else {
+      var value = this.$element.val();
+      value += this._valueSeparator + data.id;
 
-    this._syncValue();
+      this.$element.val(value);
+      this.$element.trigger('change');
+    }
   };
 
   InputData.prototype.unselect = function (_, data) {
+    var self = this;
+
     data.selected = false;
 
-    this._syncValue();
-  };
+    this.current(function (allData) {
+      var values = [];
 
-  InputData.prototype._syncValue = function () {
-    var self = this;
+      for (var d = 0; d < allData; d++) {
+        var item = allData[d];
 
-    this.current(function (allData) {
-      self.$element.val(
-        allData.join(
-          self._valueSeparator
-        )
-      );
+        if (data.id == item.id) {
+          continue;
+        }
+
+        values.push(data.id);
+      }
+
+      self.$element.val(values.join(self._valueSeparator));
       self.$element.trigger('change');
     });
   };

src/js/select2/compat/inputData.js

@@ -12,8 +12,11 @@ define([
     function getSelected (data, selectedIds) {
       var selected = [];
 
-      if (data.selected || $.inArray(selectedIds, data.id) !== -1) {
+      if (data.selected || $.inArray(data.id, selectedIds) !== -1) {
+        data.selected = true;
         selected.push(data);
+      } else {
+        data.selected = false;
       }
 
       if (data.children) {
@@ -49,28 +52,37 @@ define([
           data.selected = false;
         });
       });
-    }
 
-    data.selected = true;
+      this.$element.val(data.id);
+      this.$element.trigger('change');
+    } else {
+      var value = this.$element.val();
+      value += this._valueSeparator + data.id;
 
-    this._syncValue();
+      this.$element.val(value);
+      this.$element.trigger('change');
+    }
   };
 
   InputData.prototype.unselect = function (_, data) {
+    var self = this;
+
     data.selected = false;
 
-    this._syncValue();
-  };
+    this.current(function (allData) {
+      var values = [];
 
-  InputData.prototype._syncValue = function () {
-    var self = this;
+      for (var d = 0; d < allData; d++) {
+        var item = allData[d];
 
-    this.current(function (allData) {
-      self.$element.val(
-        allData.join(
-          self._valueSeparator
-        )
-      );
+        if (data.id == item.id) {
+          continue;
+        }
+
+        values.push(data.id);
+      }
+
+      self.$element.val(values.join(self._valueSeparator));
       self.$element.trigger('change');
     });
   };

tests/data.html

@@ -15,6 +15,7 @@
     <script src="helpers.js" type="text/javascript"></script>
 
     <script src="data/base-tests.js" type="text/javascript"></script>
+    <script src="data/inputData-tests.js" type="text/javascript"></script>
 
     <script src="data/maximumInputLength-tests.js" type="text/javascript"></script>
     <script src="data/maximumSelectionLength-tests.js" type="text/javascript"></script>

tests/data/inputData-tests.js

@@ -0,0 +1,125 @@
+module('Data adapters - <input> compatibility');
+
+var $ = require('jquery');
+
+var Options = require('select2/options');
+var Utils = require('select2/utils');
+
+var ArrayData = require('select2/data/array');
+var InputData = require('select2/compat/inputData');
+
+var InputAdapter = Utils.Decorate(ArrayData, InputData);
+
+test('test that options can be selected', function (assert) {
+  var options = new Options({
+    data: [
+      {
+        id: 'test',
+        text: 'Test'
+      }
+    ]
+  });
+  var $element = $('<input />');
+
+  var adapter = new InputAdapter($element, options);
+
+  adapter.select({
+    id: 'test'
+  });
+
+  assert.equal(
+    $element.val(),
+    'test',
+    'The id of the item should be the value'
+  );
+});
+
+test('test that options can be unselected', function (assert) {
+  var options = new Options({
+    data: [
+      {
+        id: 'test',
+        text: 'Test',
+        selected: true
+      }
+    ]
+  });
+  var $element = $('<input />');
+
+  var adapter = new InputAdapter($element, options);
+
+  adapter.unselect({
+    id: 'test'
+  });
+
+  assert.equal(
+    $element.val(),
+    '',
+    'The id should no longer be in the value'
+  );
+});
+
+test('default values can be set', function (assert) {
+  expect(4);
+
+  var options = new Options({
+    data: [
+      {
+        id: 'test',
+        text: 'Test'
+      }
+    ]
+  });
+  var $element = $('<input value="test" />');
+
+  var adapter = new InputAdapter($element, options);
+
+  adapter.current(function (data) {
+    assert.equal(
+      data.length,
+      1,
+      'There should only be a single selected option'
+    );
+
+    var item = data[0];
+
+    assert.equal(item.id, 'test');
+    assert.equal(item.text, 'Test');
+  });
+
+  assert.equal(
+    $element.val(),
+    'test',
+    'The value should not have been altered'
+  );
+});
+
+test('no default value', function (assert) {
+  expect(2);
+
+  var options = new Options({
+    data: [
+      {
+        id: 'test',
+        text: 'Test'
+      }
+    ]
+  });
+  var $element = $('<input />');
+
+  var adapter = new InputAdapter($element, options);
+
+  adapter.current(function (data) {
+    assert.equal(
+      data.length,
+      0,
+      'There should be no selected options'
+    );
+  });
+
+  assert.equal(
+    $element.val(),
+    '',
+    'The value should not have been altered'
+  );
+});