Hide the `x` when the container is disabled

This fixes an issue where the `x` in multiple selects (visible next
to the option) would be visible even if the container was disabled.
Because it was still accepting events as well, this would cause the
underlying data to be changed, even though it was disabled. We now
hide the icon using CSS so this issue doesn't occur.

The same applies to the `x` for clearing a placeholder.

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

dist/css/select2.css

@@ -142,6 +142,8 @@
 .select2-container--default.select2-container--disabled .select2-selection--single {
   background-color: #eee;
   cursor: default; }
+  .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
+    display: none; }
 .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
   border-color: transparent transparent #888 transparent;
   border-width: 0 4px 5px 4px; }
@@ -186,6 +188,8 @@
 .select2-container--default.select2-container--disabled .select2-selection--multiple {
   background-color: #eee;
   cursor: default; }
+.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
+  display: none; }
 .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
   border-top-left-radius: 0;
   border-top-right-radius: 0; }

dist/js/select2.amd.full.js

@@ -1062,11 +1062,16 @@ define('select2/selection/allowClear',[
 
     this.$selection.on('mousedown', '.select2-selection__clear',
       function (evt) {
-      evt.stopPropagation();
+        // Ignore the event if it is disabled
+        if (self.options.get('disabled')) {
+          return;
+        }
 
-      self.$element.val(self.placeholder.id).trigger('change');
+        evt.stopPropagation();
 
-      self.trigger('toggle');
+        self.$element.val(self.placeholder.id).trigger('change');
+
+        self.trigger('toggle');
     });
   };
 
@@ -2873,6 +2878,8 @@ define('select2/dropdown',[
   };
 
   Dropdown.prototype.bind = function (container, $container) {
+    var self = this;
+
     container.on('select', function (params) {
       self._onSelect(params);
     });
@@ -2883,11 +2890,11 @@ define('select2/dropdown',[
   };
 
   Dropdown.prototype._onSelect = function () {
-    self.trigger('close');
+    this.trigger('close');
   };
 
   Dropdown.prototype._onUnSelect = function () {
-    self.trigger('close');
+    this.trigger('close');
   };
 
   return Dropdown;
@@ -4055,9 +4062,9 @@ define('select2/core',[
   Select2.prototype.enable = function (args) {
     if (console && console.warn) {
       console.warn(
-        'Select2: The `select2("val")` method has been deprecated and will be' +
-        ' removed in later Select2 versions. Use $element.prop("disabled") ' +
-        'instead.'
+        'Select2: The `select2("enable")` method has been deprecated and will' +
+        ' be removed in later Select2 versions. Use $element.prop("disabled")' +
+        ' instead.'
       );
     }
 

dist/js/select2.amd.js

@@ -1062,11 +1062,16 @@ define('select2/selection/allowClear',[
 
     this.$selection.on('mousedown', '.select2-selection__clear',
       function (evt) {
-      evt.stopPropagation();
+        // Ignore the event if it is disabled
+        if (self.options.get('disabled')) {
+          return;
+        }
 
-      self.$element.val(self.placeholder.id).trigger('change');
+        evt.stopPropagation();
 
-      self.trigger('toggle');
+        self.$element.val(self.placeholder.id).trigger('change');
+
+        self.trigger('toggle');
     });
   };
 
@@ -2873,6 +2878,8 @@ define('select2/dropdown',[
   };
 
   Dropdown.prototype.bind = function (container, $container) {
+    var self = this;
+
     container.on('select', function (params) {
       self._onSelect(params);
     });
@@ -2883,11 +2890,11 @@ define('select2/dropdown',[
   };
 
   Dropdown.prototype._onSelect = function () {
-    self.trigger('close');
+    this.trigger('close');
   };
 
   Dropdown.prototype._onUnSelect = function () {
-    self.trigger('close');
+    this.trigger('close');
   };
 
   return Dropdown;
@@ -4055,9 +4062,9 @@ define('select2/core',[
   Select2.prototype.enable = function (args) {
     if (console && console.warn) {
       console.warn(
-        'Select2: The `select2("val")` method has been deprecated and will be' +
-        ' removed in later Select2 versions. Use $element.prop("disabled") ' +
-        'instead.'
+        'Select2: The `select2("enable")` method has been deprecated and will' +
+        ' be removed in later Select2 versions. Use $element.prop("disabled")' +
+        ' instead.'
       );
     }
 

dist/js/select2.full.js

@@ -10597,11 +10597,16 @@ define('select2/selection/allowClear',[
 
     this.$selection.on('mousedown', '.select2-selection__clear',
       function (evt) {
-      evt.stopPropagation();
+        // Ignore the event if it is disabled
+        if (self.options.get('disabled')) {
+          return;
+        }
 
-      self.$element.val(self.placeholder.id).trigger('change');
+        evt.stopPropagation();
 
-      self.trigger('toggle');
+        self.$element.val(self.placeholder.id).trigger('change');
+
+        self.trigger('toggle');
     });
   };
 
@@ -12408,6 +12413,8 @@ define('select2/dropdown',[
   };
 
   Dropdown.prototype.bind = function (container, $container) {
+    var self = this;
+
     container.on('select', function (params) {
       self._onSelect(params);
     });
@@ -12418,11 +12425,11 @@ define('select2/dropdown',[
   };
 
   Dropdown.prototype._onSelect = function () {
-    self.trigger('close');
+    this.trigger('close');
   };
 
   Dropdown.prototype._onUnSelect = function () {
-    self.trigger('close');
+    this.trigger('close');
   };
 
   return Dropdown;
@@ -13590,9 +13597,9 @@ define('select2/core',[
   Select2.prototype.enable = function (args) {
     if (console && console.warn) {
       console.warn(
-        'Select2: The `select2("val")` method has been deprecated and will be' +
-        ' removed in later Select2 versions. Use $element.prop("disabled") ' +
-        'instead.'
+        'Select2: The `select2("enable")` method has been deprecated and will' +
+        ' be removed in later Select2 versions. Use $element.prop("disabled")' +
+        ' instead.'
       );
     }
 

dist/js/select2.js

@@ -1490,11 +1490,16 @@ define('select2/selection/allowClear',[
 
     this.$selection.on('mousedown', '.select2-selection__clear',
       function (evt) {
-      evt.stopPropagation();
+        // Ignore the event if it is disabled
+        if (self.options.get('disabled')) {
+          return;
+        }
 
-      self.$element.val(self.placeholder.id).trigger('change');
+        evt.stopPropagation();
 
-      self.trigger('toggle');
+        self.$element.val(self.placeholder.id).trigger('change');
+
+        self.trigger('toggle');
     });
   };
 
@@ -3301,6 +3306,8 @@ define('select2/dropdown',[
   };
 
   Dropdown.prototype.bind = function (container, $container) {
+    var self = this;
+
     container.on('select', function (params) {
       self._onSelect(params);
     });
@@ -3311,11 +3318,11 @@ define('select2/dropdown',[
   };
 
   Dropdown.prototype._onSelect = function () {
-    self.trigger('close');
+    this.trigger('close');
   };
 
   Dropdown.prototype._onUnSelect = function () {
-    self.trigger('close');
+    this.trigger('close');
   };
 
   return Dropdown;
@@ -4483,9 +4490,9 @@ define('select2/core',[
   Select2.prototype.enable = function (args) {
     if (console && console.warn) {
       console.warn(
-        'Select2: The `select2("val")` method has been deprecated and will be' +
-        ' removed in later Select2 versions. Use $element.prop("disabled") ' +
-        'instead.'
+        'Select2: The `select2("enable")` method has been deprecated and will' +
+        ' be removed in later Select2 versions. Use $element.prop("disabled")' +
+        ' instead.'
       );
     }
 

src/js/select2/core.js

@@ -308,9 +308,9 @@ define([
   Select2.prototype.enable = function (args) {
     if (console && console.warn) {
       console.warn(
-        'Select2: The `select2("val")` method has been deprecated and will be' +
-        ' removed in later Select2 versions. Use $element.prop("disabled") ' +
-        'instead.'
+        'Select2: The `select2("enable")` method has been deprecated and will' +
+        ' be removed in later Select2 versions. Use $element.prop("disabled")' +
+        ' instead.'
       );
     }
 

src/js/select2/dropdown.js

@@ -34,6 +34,8 @@ define([
   };
 
   Dropdown.prototype.bind = function (container, $container) {
+    var self = this;
+
     container.on('select', function (params) {
       self._onSelect(params);
     });
@@ -44,11 +46,11 @@ define([
   };
 
   Dropdown.prototype._onSelect = function () {
-    self.trigger('close');
+    this.trigger('close');
   };
 
   Dropdown.prototype._onUnSelect = function () {
-    self.trigger('close');
+    this.trigger('close');
   };
 
   return Dropdown;

src/js/select2/selection/allowClear.js

@@ -10,11 +10,16 @@ define([
 
     this.$selection.on('mousedown', '.select2-selection__clear',
       function (evt) {
-      evt.stopPropagation();
+        // Ignore the event if it is disabled
+        if (self.options.get('disabled')) {
+          return;
+        }
 
-      self.$element.val(self.placeholder.id).trigger('change');
+        evt.stopPropagation();
 
-      self.trigger('toggle');
+        self.$element.val(self.placeholder.id).trigger('change');
+
+        self.trigger('toggle');
     });
   };
 

src/scss/theme/default/_multiple.scss

@@ -70,4 +70,10 @@
     background-color: #eee;
     cursor: default;
   }
+
+
+
+  .select2-selection__choice__remove {
+    display: none;
+  }
 }

src/scss/theme/default/_single.scss

@@ -64,6 +64,10 @@
   .select2-selection--single {
     background-color: #eee;
     cursor: default;
+
+    .select2-selection__clear {
+      display: none;
+    }
   }
 }