Style clear icon in multiple selects

The `AllowClear` decorator appears to work fine with multiple
selects, so we've chosen to remove remove it. This adds some
styling and fixes the check so it all works as expected.

This closes https://github.com/select2/select2/issues/2903.

dist/css/select2.css

@@ -155,11 +155,18 @@
   .select2-container--default .select2-selection--multiple .select2-selection__rendered {
     list-style: none;
     margin: 0;
-    padding: 0 5px; }
+    padding: 0 5px;
+    width: 100%; }
   .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
     color: #999;
     margin-top: 5px;
     float: left; }
+  .select2-container--default .select2-selection--multiple .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin-top: 5px;
+    margin-right: 10px; }
   .select2-container--default .select2-selection--multiple .select2-selection__choice {
     background-color: #e4e4e4;
     border: 1px solid #aaa;
@@ -316,6 +323,8 @@
     list-style: none;
     margin: 0;
     padding: 0 5px; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__clear {
+    display: none; }
   .select2-container--classic .select2-selection--multiple .select2-selection__choice {
     background-color: #e4e4e4;
     border: 1px solid #aaa;

dist/js/select2.amd.full.js

@@ -1078,7 +1078,8 @@ define('select2/selection/allowClear',[
   AllowClear.prototype.update = function (decorated, data) {
     decorated.call(this, data);
 
-    if (this.$selection.find('.select2-selection__placeholder').length > 0) {
+    if (this.$selection.find('.select2-selection__placeholder').length > 0 ||
+        data.length === 0) {
       return;
     }
 

dist/js/select2.amd.js

@@ -1078,7 +1078,8 @@ define('select2/selection/allowClear',[
   AllowClear.prototype.update = function (decorated, data) {
     decorated.call(this, data);
 
-    if (this.$selection.find('.select2-selection__placeholder').length > 0) {
+    if (this.$selection.find('.select2-selection__placeholder').length > 0 ||
+        data.length === 0) {
       return;
     }
 

dist/js/select2.full.js

@@ -10613,7 +10613,8 @@ define('select2/selection/allowClear',[
   AllowClear.prototype.update = function (decorated, data) {
     decorated.call(this, data);
 
-    if (this.$selection.find('.select2-selection__placeholder').length > 0) {
+    if (this.$selection.find('.select2-selection__placeholder').length > 0 ||
+        data.length === 0) {
       return;
     }
 

dist/js/select2.js

@@ -1506,7 +1506,8 @@ define('select2/selection/allowClear',[
   AllowClear.prototype.update = function (decorated, data) {
     decorated.call(this, data);
 
-    if (this.$selection.find('.select2-selection__placeholder').length > 0) {
+    if (this.$selection.find('.select2-selection__placeholder').length > 0 ||
+        data.length === 0) {
       return;
     }
 

src/js/select2/selection/allowClear.js

@@ -26,7 +26,8 @@ define([
   AllowClear.prototype.update = function (decorated, data) {
     decorated.call(this, data);
 
-    if (this.$selection.find('.select2-selection__placeholder').length > 0) {
+    if (this.$selection.find('.select2-selection__placeholder').length > 0 ||
+        data.length === 0) {
       return;
     }
 

src/scss/theme/classic/_multiple.scss

@@ -18,6 +18,10 @@
     padding: 0 5px;
   }
 
+  .select2-selection__clear {
+    display: none;
+  }
+
   .select2-selection__choice {
     background-color: #e4e4e4;
 

src/scss/theme/default/_multiple.scss

@@ -8,6 +8,7 @@
     list-style: none;
     margin: 0;
     padding: 0 5px;
+    width: 100%;
   }
 
   .select2-selection__placeholder {
@@ -18,6 +19,14 @@
     float: left;
   }
 
+  .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin-top: 5px;
+    margin-right: 10px;
+  }
+
   .select2-selection__choice {
     background-color: #e4e4e4;