Added back the allowClear option

dist/css/select2.css

@@ -84,6 +84,11 @@
   .select2-container--default .select2-selection--single .select2-selection__rendered {
     color: #444;
     line-height: 28px; }
+  .select2-container--default .select2-selection--single .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin-right: 10px; }
   .select2-container--default .select2-selection--single .select2-selection__placeholder {
     color: #999; }
 .select2-container--default .select2-selection--multiple {
@@ -156,6 +161,11 @@
   .select2-container--classic .select2-selection--single .select2-selection__rendered {
     color: #444;
     line-height: 28px; }
+  .select2-container--classic .select2-selection--single .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin-right: 10px; }
   .select2-container--classic .select2-selection--single .select2-selection__placeholder {
     color: #999; }
 .select2-container--classic.select2-container--open .select2-selection--single {

dist/js/select2.amd.full.js

@@ -967,6 +967,45 @@ define('select2/selection/placeholder',[
   return Placeholder;
 });
 
+define('select2/selection/allowClear',[
+
+], function () {
+  function AllowClear () { }
+
+  AllowClear.prototype.bind = function (decorated, container, $container) {
+    var self = this;
+
+    decorated.call(this, container, $container);
+
+    this.$selection.on('mousedown', '.select2-selection__clear',
+      function (evt) {
+      evt.stopPropagation();
+
+      self.$element.val(self.placeholder.id).trigger('change');
+
+      self.trigger('toggle');
+    });
+  };
+
+  AllowClear.prototype.update = function (decorated, data) {
+    decorated.call(this, data);
+
+    if (this.$selection.find('.select2-selection__placeholder').length > 0) {
+      return;
+    }
+
+    var $remove = $(
+      '<span class="select2-selection__clear">' +
+        '&times;' +
+      '</span>'
+    );
+
+    this.$selection.find('.select2-selection__rendered').append($remove);
+  };
+
+  return AllowClear;
+});
+
 define('select2/selection/search',[
   '../utils'
 ], function (Utils) {
@@ -2800,6 +2839,7 @@ define('select2/defaults',[
   './selection/single',
   './selection/multiple',
   './selection/placeholder',
+  './selection/allowClear',
   './selection/search',
 
   './utils',
@@ -2819,7 +2859,8 @@ define('select2/defaults',[
 
   './i18n/en'
 ], function ($, ResultsList,
-             SingleSelection, MultipleSelection, Placeholder, SelectionSearch,
+             SingleSelection, MultipleSelection, Placeholder, AllowClear,
+             SelectionSearch,
              Utils, Translation, DIACRITICS,
              SelectData, ArrayData, AjaxData, Tags, MinimumInputLength,
              Dropdown, DropdownSearch, HidePlaceholder, InfiniteScroll,
@@ -2894,6 +2935,13 @@ define('select2/defaults',[
           options.selectionAdapter,
           Placeholder
         );
+
+        if (options.allowClear) {
+          options.selectionAdapter = Utils.Decorate(
+            options.selectionAdapter,
+            AllowClear
+          );
+        }
       }
 
       if (options.multiple) {

dist/js/select2.amd.js

@@ -967,6 +967,45 @@ define('select2/selection/placeholder',[
   return Placeholder;
 });
 
+define('select2/selection/allowClear',[
+
+], function () {
+  function AllowClear () { }
+
+  AllowClear.prototype.bind = function (decorated, container, $container) {
+    var self = this;
+
+    decorated.call(this, container, $container);
+
+    this.$selection.on('mousedown', '.select2-selection__clear',
+      function (evt) {
+      evt.stopPropagation();
+
+      self.$element.val(self.placeholder.id).trigger('change');
+
+      self.trigger('toggle');
+    });
+  };
+
+  AllowClear.prototype.update = function (decorated, data) {
+    decorated.call(this, data);
+
+    if (this.$selection.find('.select2-selection__placeholder').length > 0) {
+      return;
+    }
+
+    var $remove = $(
+      '<span class="select2-selection__clear">' +
+        '&times;' +
+      '</span>'
+    );
+
+    this.$selection.find('.select2-selection__rendered').append($remove);
+  };
+
+  return AllowClear;
+});
+
 define('select2/selection/search',[
   '../utils'
 ], function (Utils) {
@@ -2800,6 +2839,7 @@ define('select2/defaults',[
   './selection/single',
   './selection/multiple',
   './selection/placeholder',
+  './selection/allowClear',
   './selection/search',
 
   './utils',
@@ -2819,7 +2859,8 @@ define('select2/defaults',[
 
   './i18n/en'
 ], function ($, ResultsList,
-             SingleSelection, MultipleSelection, Placeholder, SelectionSearch,
+             SingleSelection, MultipleSelection, Placeholder, AllowClear,
+             SelectionSearch,
              Utils, Translation, DIACRITICS,
              SelectData, ArrayData, AjaxData, Tags, MinimumInputLength,
              Dropdown, DropdownSearch, HidePlaceholder, InfiniteScroll,
@@ -2894,6 +2935,13 @@ define('select2/defaults',[
           options.selectionAdapter,
           Placeholder
         );
+
+        if (options.allowClear) {
+          options.selectionAdapter = Utils.Decorate(
+            options.selectionAdapter,
+            AllowClear
+          );
+        }
       }
 
       if (options.multiple) {

dist/js/select2.full.js

@@ -10502,6 +10502,45 @@ define('select2/selection/placeholder',[
   return Placeholder;
 });
 
+define('select2/selection/allowClear',[
+
+], function () {
+  function AllowClear () { }
+
+  AllowClear.prototype.bind = function (decorated, container, $container) {
+    var self = this;
+
+    decorated.call(this, container, $container);
+
+    this.$selection.on('mousedown', '.select2-selection__clear',
+      function (evt) {
+      evt.stopPropagation();
+
+      self.$element.val(self.placeholder.id).trigger('change');
+
+      self.trigger('toggle');
+    });
+  };
+
+  AllowClear.prototype.update = function (decorated, data) {
+    decorated.call(this, data);
+
+    if (this.$selection.find('.select2-selection__placeholder').length > 0) {
+      return;
+    }
+
+    var $remove = $(
+      '<span class="select2-selection__clear">' +
+        '&times;' +
+      '</span>'
+    );
+
+    this.$selection.find('.select2-selection__rendered').append($remove);
+  };
+
+  return AllowClear;
+});
+
 define('select2/selection/search',[
   '../utils'
 ], function (Utils) {
@@ -12335,6 +12374,7 @@ define('select2/defaults',[
   './selection/single',
   './selection/multiple',
   './selection/placeholder',
+  './selection/allowClear',
   './selection/search',
 
   './utils',
@@ -12354,7 +12394,8 @@ define('select2/defaults',[
 
   './i18n/en'
 ], function ($, ResultsList,
-             SingleSelection, MultipleSelection, Placeholder, SelectionSearch,
+             SingleSelection, MultipleSelection, Placeholder, AllowClear,
+             SelectionSearch,
              Utils, Translation, DIACRITICS,
              SelectData, ArrayData, AjaxData, Tags, MinimumInputLength,
              Dropdown, DropdownSearch, HidePlaceholder, InfiniteScroll,
@@ -12429,6 +12470,13 @@ define('select2/defaults',[
           options.selectionAdapter,
           Placeholder
         );
+
+        if (options.allowClear) {
+          options.selectionAdapter = Utils.Decorate(
+            options.selectionAdapter,
+            AllowClear
+          );
+        }
       }
 
       if (options.multiple) {

dist/js/select2.js

@@ -1395,6 +1395,45 @@ define('select2/selection/placeholder',[
   return Placeholder;
 });
 
+define('select2/selection/allowClear',[
+
+], function () {
+  function AllowClear () { }
+
+  AllowClear.prototype.bind = function (decorated, container, $container) {
+    var self = this;
+
+    decorated.call(this, container, $container);
+
+    this.$selection.on('mousedown', '.select2-selection__clear',
+      function (evt) {
+      evt.stopPropagation();
+
+      self.$element.val(self.placeholder.id).trigger('change');
+
+      self.trigger('toggle');
+    });
+  };
+
+  AllowClear.prototype.update = function (decorated, data) {
+    decorated.call(this, data);
+
+    if (this.$selection.find('.select2-selection__placeholder').length > 0) {
+      return;
+    }
+
+    var $remove = $(
+      '<span class="select2-selection__clear">' +
+        '&times;' +
+      '</span>'
+    );
+
+    this.$selection.find('.select2-selection__rendered').append($remove);
+  };
+
+  return AllowClear;
+});
+
 define('select2/selection/search',[
   '../utils'
 ], function (Utils) {
@@ -3228,6 +3267,7 @@ define('select2/defaults',[
   './selection/single',
   './selection/multiple',
   './selection/placeholder',
+  './selection/allowClear',
   './selection/search',
 
   './utils',
@@ -3247,7 +3287,8 @@ define('select2/defaults',[
 
   './i18n/en'
 ], function ($, ResultsList,
-             SingleSelection, MultipleSelection, Placeholder, SelectionSearch,
+             SingleSelection, MultipleSelection, Placeholder, AllowClear,
+             SelectionSearch,
              Utils, Translation, DIACRITICS,
              SelectData, ArrayData, AjaxData, Tags, MinimumInputLength,
              Dropdown, DropdownSearch, HidePlaceholder, InfiniteScroll,
@@ -3322,6 +3363,13 @@ define('select2/defaults',[
           options.selectionAdapter,
           Placeholder
         );
+
+        if (options.allowClear) {
+          options.selectionAdapter = Utils.Decorate(
+            options.selectionAdapter,
+            AllowClear
+          );
+        }
       }
 
       if (options.multiple) {

docs/examples.html

@@ -50,10 +50,6 @@ $(document).ready(function() {
     <div class="col-md-4">
       <h1>Multiple select boxes</h1>
 
-      <p>
-        <select class="js-states" multiple="multiple"></select>
-      </p>
-
       <p>
         Select2 also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute.
       </p>
@@ -106,9 +102,10 @@ $(".js-example-basic-multiple").select2();
 
       <pre data-fill-from=".js-code-placeholder"></pre>
 
-<script type="text/x-example-code" class="js-code-placeholder">
+<script type="text/javascript" class="js-code-placeholder">
 $(".js-example-placeholder-single").select2({
-  placeholder: "Select a state"
+  placeholder: "Select a state",
+  allowClear: true
 });
 
 $(".js-example-placeholder-multiple").select2({
@@ -386,11 +383,11 @@ $.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
     <div class="col-md-8">
       <h2>Example code</h2>
 
-      <pre data-fill-from=".js-code-language"></pre>
+      <pre data-fill-from=".js-code-diacritics"></pre>
 
-      <script type="text/x-example-code" class="js-code-language">
-      $(".js-example-diacritics").select2();
-      </script>
+<script type="text/x-example-code" class="js-code-diacritics">
+$(".js-example-diacritics").select2();
+</script>
     </div>
   </section>
 
@@ -421,11 +418,11 @@ $.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
 
       <pre data-fill-from=".js-code-language"></pre>
 
-      <script type="text/x-example-code" class="js-code-language">
-      $(".js-example-language").select2({
-        language: "es"
-      });
-      </script>
+<script type="text/x-example-code" class="js-code-language">
+$(".js-example-language").select2({
+  language: "es"
+});
+</script>
     </div>
   </section>
 
@@ -561,9 +558,6 @@ $.fn.select2.amd.require(
   var $basicSingle = $(".js-example-basic-single");
   var $basicMultiple = $(".js-example-basic-multiple");
 
-  var $placeholderSingle = $(".js-example-placeholder-single");
-  var $placeholderMultiple = $(".js-example-placeholder-multiple");
-
   var $dataArray = $(".js-example-data-array");
   var $dataArraySelected = $(".js-example-data-array-selected");
 
@@ -583,14 +577,6 @@ $.fn.select2.amd.require(
   $basicSingle.select2();
   $basicMultiple.select2()
 
-  $placeholderSingle.select2({
-    placeholder: "Select a state"
-  });
-
-  $placeholderMultiple.select2({
-    placeholder: "Select a state"
-  });
-
   $dataArray.select2({
     data: data
   });

src/js/select2/defaults.js

@@ -5,6 +5,7 @@ define([
   './selection/single',
   './selection/multiple',
   './selection/placeholder',
+  './selection/allowClear',
   './selection/search',
 
   './utils',
@@ -24,7 +25,8 @@ define([
 
   './i18n/en'
 ], function ($, ResultsList,
-             SingleSelection, MultipleSelection, Placeholder, SelectionSearch,
+             SingleSelection, MultipleSelection, Placeholder, AllowClear,
+             SelectionSearch,
              Utils, Translation, DIACRITICS,
              SelectData, ArrayData, AjaxData, Tags, MinimumInputLength,
              Dropdown, DropdownSearch, HidePlaceholder, InfiniteScroll,
@@ -99,6 +101,13 @@ define([
           options.selectionAdapter,
           Placeholder
         );
+
+        if (options.allowClear) {
+          options.selectionAdapter = Utils.Decorate(
+            options.selectionAdapter,
+            AllowClear
+          );
+        }
       }
 
       if (options.multiple) {

src/js/select2/selection/allowClear.js

@@ -0,0 +1,38 @@
+define([
+
+], function () {
+  function AllowClear () { }
+
+  AllowClear.prototype.bind = function (decorated, container, $container) {
+    var self = this;
+
+    decorated.call(this, container, $container);
+
+    this.$selection.on('mousedown', '.select2-selection__clear',
+      function (evt) {
+      evt.stopPropagation();
+
+      self.$element.val(self.placeholder.id).trigger('change');
+
+      self.trigger('toggle');
+    });
+  };
+
+  AllowClear.prototype.update = function (decorated, data) {
+    decorated.call(this, data);
+
+    if (this.$selection.find('.select2-selection__placeholder').length > 0) {
+      return;
+    }
+
+    var $remove = $(
+      '<span class="select2-selection__clear">' +
+        '&times;' +
+      '</span>'
+    );
+
+    this.$selection.find('.select2-selection__rendered').append($remove);
+  };
+
+  return AllowClear;
+});

src/scss/theme/classic/_single.scss

@@ -17,6 +17,13 @@
     line-height: 28px;
   }
 
+  .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin-right: 10px;
+  }
+
   .select2-selection__placeholder {
     color: #999;
   }

src/scss/theme/default/layout.scss

@@ -9,6 +9,13 @@
       line-height: 28px;
     }
 
+    .select2-selection__clear {
+      cursor: pointer;
+      float: right;
+      font-weight: bold;
+      margin-right: 10px;
+    }
+
     .select2-selection__placeholder {
       color: #999;
     }