From 662e32e6dd408c9003813420291e274b86f2519a Mon Sep 17 00:00:00 2001
From: Martin Bohal <martin@visionapps.cz>
Date: Fri, 15 Jul 2016 15:08:54 +0200
Subject: [PATCH] Fix text shown in select2 option if value attribute was
 specified

---
 src/js/select2-loader.js                           |  4 ++--
 src/js/tests/unit/select2-loader.js                | 10 ++++++++--
 src/less/components/javascript/select2-loader.less |  2 ++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/js/select2-loader.js b/src/js/select2-loader.js
index 60272cb0..ef1a3fa1 100644
--- 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
index eac76daa..451c0fc7 100644
--- 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
index 292b4cb0..4415920a 100644
--- 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"