Merge pull request select2#3324 from stretch4x4/MultiSelectStyling

Adding container support issue select2#3222

Author: kevin-brown

src/js/select2/selection/multiple.js

@@ -50,11 +50,11 @@ define([
     this.$selection.find('.select2-selection__rendered').empty();
   };
 
-  MultipleSelection.prototype.display = function (data) {
+  MultipleSelection.prototype.display = function (data, container) {
     var template = this.options.get('templateSelection');
     var escapeMarkup = this.options.get('escapeMarkup');
 
-    return escapeMarkup(template(data));
+    return escapeMarkup(template(data, container));
   };
 
   MultipleSelection.prototype.selectionContainer = function () {
@@ -81,8 +81,8 @@ define([
     for (var d = 0; d < data.length; d++) {
       var selection = data[d];
 
-      var formatted = this.display(selection);
       var $selection = this.selectionContainer();
+      var formatted = this.display(selection, $selection);
 
       $selection.append(formatted);
       $selection.prop('title', selection.title || selection.text);

src/js/select2/selection/single.js

@@ -63,11 +63,11 @@ define([
     this.$selection.find('.select2-selection__rendered').empty();
   };
 
-  SingleSelection.prototype.display = function (data) {
+  SingleSelection.prototype.display = function (data, container) {
     var template = this.options.get('templateSelection');
     var escapeMarkup = this.options.get('escapeMarkup');
 
-    return escapeMarkup(template(data));
+    return escapeMarkup(template(data, container));
   };
 
   SingleSelection.prototype.selectionContainer = function () {
@@ -82,9 +82,9 @@ define([
 
     var selection = data[0];
 
-    var formatted = this.display(selection);
-
     var $rendered = this.$selection.find('.select2-selection__rendered');
+    var formatted = this.display(selection, $rendered);
+
     $rendered.empty().append(formatted);
     $rendered.prop('title', selection.title || selection.text);
   };

tests/selection/multiple-tests.js

@@ -33,6 +33,35 @@ test('display uses templateSelection', function (assert) {
   assert.equal(out, 'test');
 });
 
+test('templateSelection can addClass', function (assert) {
+  var called = false;
+
+  var templateOptions = new Options({
+    templateSelection: function (data, container) {
+      called = true;
+      container.addClass('testclass');
+      return data.text;
+    }
+  });
+
+  var selection = new MultipleSelection(
+    $('#qunit-fixture .multiple'),
+    templateOptions
+  );
+
+  var $container = selection.selectionContainer();
+  
+  var out = selection.display({
+    text: 'test'
+  }, $container);
+
+  assert.ok(called);
+
+  assert.equal(out, 'test');
+  
+  assert.ok($container.hasClass('testclass'));
+});
+
 test('empty update clears the selection', function (assert) {
   var selection = new MultipleSelection(
     $('#qunit-fixture .multiple'),

tests/selection/single-tests.js

@@ -33,6 +33,35 @@ test('display uses templateSelection', function (assert) {
   assert.equal(out, 'test');
 });
 
+test('templateSelection can addClass', function (assert) {
+  var called = false;
+
+  var templateOptions = new Options({
+    templateSelection: function (data, container) {
+      called = true;
+      container.addClass('testclass');
+      return data.text;
+    }
+  });
+
+  var selection = new SingleSelection(
+    $('#qunit-fixture .single'),
+    templateOptions
+  );
+
+  var $container = selection.selectionContainer();
+  
+  var out = selection.display({
+    text: 'test'
+  }, $container);
+
+  assert.ok(called);
+
+  assert.equal(out, 'test');
+  
+  assert.ok($container.hasClass('testclass'));
+});
+
 test('empty update clears the selection', function (assert) {
   var selection = new SingleSelection(
     $('#qunit-fixture .single'),