CRM-16415 - Fix crmSelect2 placeholder icons

diff --git a/ang/crmUi.js b/ang/crmUi.js
index b5c76b2c3de065a3c4d3e33ac79a13daeb58a1bb..d62d44153e7a384b1fefa3a8ff713891e53e1356 100644 (file)
--- a/ang/crmUi.js
+++ b/ang/crmUi.js
@@ -599,7 +599,7 @@
 
           function init() {
             // TODO watch select2-options
-            element.select2(scope.crmUiSelect || {});
+            element.crmSelect2(scope.crmUiSelect || {});
             if (ngModel) {
               element.on('change', refreshModel);
               $timeout(ngModel.$render);

diff --git a/css/civicrm.css b/css/civicrm.css
index 71e9c1a91c1783c9378d8cbe09fd0e4bdcd474c9..39eaa364f3f261efe73320698dc18fb917629974 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3110,6 +3110,10 @@ div.m ul#civicrm-menu,
 .crm-container .crm-action-menu .select2-default span.select2-chosen {
   color: #2786C2;
 }
+.crm-container .select2-container[class*=" fa-"]:before {
+  display: none;
+}
+
 /* Restore this property otherwise our css overrides it */
 .select2-search input {
   box-sizing: border-box;

diff --git a/js/Common.js b/js/Common.js
index e69025c3adabd2a5e6bf18bcfdcb24cc7e7b3dc5..a812af0c61120b5effe60433d0d4e58aa0a4baa3 100644 (file)
--- a/js/Common.js
+++ b/js/Common.js
@@ -385,10 +385,17 @@ if (!CRM.vars) CRM.vars = {};
       // add disabled property for option values
       $('option[value^=crm_disabled_opt]', this).attr('disabled', 'disabled');
 
-      // Placeholder icon
+      // Placeholder icon - total hack hikacking the escapeMarkup function but select2 3.5 dosn't have any other callbacks for this :(
       if ($el.is('[class*=fa-]')) {
-        iconClass = $el.attr('class').match(/(fa-\S*)/)[1];
-        $el.removeClass(iconClass);
+        settings.escapeMarkup = function (m) {
+          var out = _.escape(m),
+            placeholder = settings.placeholder || $el.data('placeholder') || $el.attr('placeholder') || $('option[value=""]', $el).text();
+          if (m.length && placeholder === m) {
+            iconClass = $el.attr('class').match(/(fa-\S*)/)[1];
+            out = '<i class="crm-i ' + iconClass + '"></i> ' + out;
+          }
+          return out;
+        };
       }
 
       // Defaults for single-selects
@@ -403,11 +410,6 @@ if (!CRM.vars) CRM.vars = {};
         $el.addClass('crm-ajax-select');
       }
       $el.select2(settings);
-      if (iconClass) {
-        window.setTimeout(function() {
-          $el.select2('container').find('span.select2-chosen').prepend('<i class="crm-i ' + iconClass + '"></i>&nbsp;');
-        }, 10);
-      }
     });
   };