Merge pull request #78 from visionappscz/bugfix/fix-select2-loader-op…

…tion-display Fix text shown in select2 option if value attribute was specified
visionappscz · Jul 15, 2016 · b859719 · b859719
2 parents 8a68212 + 662e32e
commit b859719
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/js/select2-loader.js b/src/js/select2-loader.js
@@ -34,10 +34,10 @@
               attribs = attribs + ' width="' + imageWidth + '"';
             }
 
-            return '<img ' + attribs + '>&nbsp;' + option.id;
+            return '<img ' + attribs + '>&nbsp;' + option.text;
           }
 
-          return option.id;
+          return option.text;
         };
 
         if (confValue) {

diff --git a/src/js/tests/unit/select2-loader.js b/src/js/tests/unit/select2-loader.js
@@ -65,9 +65,15 @@ $(function () {
       return value.formatResult === value.formatSelection;
     }));
 
+    QUnit.ok(jQuery.fn.select2 .calledWithMatch(function (value) {
+      var testOpt = { element: $('option'), text: 'optionText' };
+
+      return value.formatResult(testOpt) === 'optionText';
+    }));
+
     QUnit.ok(jQuery.fn.select2 .calledWithMatch(function (value) {
       var testOpt = { element: $optEl };
-      var output = '<img src="imageSource" alt="optionText">&nbsp;optionId';
+      var output = '<img src="imageSource" alt="optionText">&nbsp;optionText';
 
       $.extend(testOpt, option);
 
@@ -78,7 +84,7 @@ $(function () {
       var testOpt = { element: $optEl };
       var output = '<img ' +
         'src="imageSource" alt="optionText" srcset="imageSrcset" height="10" width="10"' +
-        '>&nbsp;optionId';
+        '>&nbsp;optionText';
 
       $optEl.attr('data-image-srcset', 'imageSrcset');
       $optEl.attr('data-image-width', '10');

diff --git a/src/less/components/javascript/select2-loader.less b/src/less/components/javascript/select2-loader.less
@@ -35,12 +35,14 @@ Markup:
 <select class="form-control" data-onload-select2='{"minimumResultsForSearch": "Infinity"}'>
     <option
         selected
+        value="flag-czech"
         data-image-src="//satyr.io/32x16?flag=cze"
         data-image-srcset="//satyr.io/32x16?flag=cze, //satyr.io/64x32?flag=cze 2x"
         data-image-width="32"
         data-image-height="16"
     >Czech</option>
     <option
+        value="flag-canada"
         data-image-src="//satyr.io/32x16?flag=can"
         data-image-srcset="//satyr.io/32x16?flag=can, //satyr.io/64x32?flag=can 2x"
         data-image-width="32"