Automatically close on scroll

This now matches how the browser works, where the dropdown is
closed when the window scrolls.

The arrow was also covering the clear placeholder icon, this has
now been fixed and the clear icon is now placed correctly.

dist/css/select2.css

@@ -16,6 +16,7 @@
     display: block;
     overflow: hidden;
     padding-left: 8px;
+    padding-right: 20px;
     text-overflow: ellipsis; }
 
 .select2-selection--multiple {
@@ -89,8 +90,7 @@
   .select2-container--default .select2-selection--single .select2-selection__clear {
     cursor: pointer;
     float: right;
-    font-weight: bold;
-    margin-right: 10px; }
+    font-weight: bold; }
   .select2-container--default .select2-selection--single .select2-selection__placeholder {
     color: #999; }
   .select2-container--default .select2-selection--single .select2-selection__arrow {

dist/js/select2.amd.full.js

@@ -704,6 +704,8 @@ define('select2/selection/base',[
   };
 
   BaseSelection.prototype._attachCloseHandler = function (container) {
+    var self = this;
+
     $(document.body).on('mousedown.select2.' + container.id, function (e) {
       var $target = $(e.target);
 
@@ -723,10 +725,15 @@ define('select2/selection/base',[
         $element.select2('close');
       });
     });
+
+    $(window).on('scroll.select2.' + container.id, function (e) {
+      self.trigger('close');
+    });
   };
 
   BaseSelection.prototype._detachCloseHandler = function (container) {
     $(document.body).off('mousedown.select2.' + container.id);
+    $(window).off('scroll.select2.' + container.id);
   };
 
   BaseSelection.prototype.position = function ($selection, $container) {
@@ -735,8 +742,7 @@ define('select2/selection/base',[
   };
 
   BaseSelection.prototype.destroy = function () {
-    // Unbind the dropdown click handler if it exists
-    $(document.body).off('.select2.' + this.container.id);
+    this._detachCloseHandler();
   };
 
   BaseSelection.prototype.update = function (data) {

dist/js/select2.amd.js

@@ -704,6 +704,8 @@ define('select2/selection/base',[
   };
 
   BaseSelection.prototype._attachCloseHandler = function (container) {
+    var self = this;
+
     $(document.body).on('mousedown.select2.' + container.id, function (e) {
       var $target = $(e.target);
 
@@ -723,10 +725,15 @@ define('select2/selection/base',[
         $element.select2('close');
       });
     });
+
+    $(window).on('scroll.select2.' + container.id, function (e) {
+      self.trigger('close');
+    });
   };
 
   BaseSelection.prototype._detachCloseHandler = function (container) {
     $(document.body).off('mousedown.select2.' + container.id);
+    $(window).off('scroll.select2.' + container.id);
   };
 
   BaseSelection.prototype.position = function ($selection, $container) {
@@ -735,8 +742,7 @@ define('select2/selection/base',[
   };
 
   BaseSelection.prototype.destroy = function () {
-    // Unbind the dropdown click handler if it exists
-    $(document.body).off('.select2.' + this.container.id);
+    this._detachCloseHandler();
   };
 
   BaseSelection.prototype.update = function (data) {

dist/js/select2.full.js

@@ -10239,6 +10239,8 @@ define('select2/selection/base',[
   };
 
   BaseSelection.prototype._attachCloseHandler = function (container) {
+    var self = this;
+
     $(document.body).on('mousedown.select2.' + container.id, function (e) {
       var $target = $(e.target);
 
@@ -10258,10 +10260,15 @@ define('select2/selection/base',[
         $element.select2('close');
       });
     });
+
+    $(window).on('scroll.select2.' + container.id, function (e) {
+      self.trigger('close');
+    });
   };
 
   BaseSelection.prototype._detachCloseHandler = function (container) {
     $(document.body).off('mousedown.select2.' + container.id);
+    $(window).off('scroll.select2.' + container.id);
   };
 
   BaseSelection.prototype.position = function ($selection, $container) {
@@ -10270,8 +10277,7 @@ define('select2/selection/base',[
   };
 
   BaseSelection.prototype.destroy = function () {
-    // Unbind the dropdown click handler if it exists
-    $(document.body).off('.select2.' + this.container.id);
+    this._detachCloseHandler();
   };
 
   BaseSelection.prototype.update = function (data) {

dist/js/select2.js

@@ -1132,6 +1132,8 @@ define('select2/selection/base',[
   };
 
   BaseSelection.prototype._attachCloseHandler = function (container) {
+    var self = this;
+
     $(document.body).on('mousedown.select2.' + container.id, function (e) {
       var $target = $(e.target);
 
@@ -1151,10 +1153,15 @@ define('select2/selection/base',[
         $element.select2('close');
       });
     });
+
+    $(window).on('scroll.select2.' + container.id, function (e) {
+      self.trigger('close');
+    });
   };
 
   BaseSelection.prototype._detachCloseHandler = function (container) {
     $(document.body).off('mousedown.select2.' + container.id);
+    $(window).off('scroll.select2.' + container.id);
   };
 
   BaseSelection.prototype.position = function ($selection, $container) {
@@ -1163,8 +1170,7 @@ define('select2/selection/base',[
   };
 
   BaseSelection.prototype.destroy = function () {
-    // Unbind the dropdown click handler if it exists
-    $(document.body).off('.select2.' + this.container.id);
+    this._detachCloseHandler();
   };
 
   BaseSelection.prototype.update = function (data) {

src/js/select2/selection/base.js

@@ -60,6 +60,8 @@ define([
   };
 
   BaseSelection.prototype._attachCloseHandler = function (container) {
+    var self = this;
+
     $(document.body).on('mousedown.select2.' + container.id, function (e) {
       var $target = $(e.target);
 
@@ -79,10 +81,15 @@ define([
         $element.select2('close');
       });
     });
+
+    $(window).on('scroll.select2.' + container.id, function (e) {
+      self.trigger('close');
+    });
   };
 
   BaseSelection.prototype._detachCloseHandler = function (container) {
     $(document.body).off('mousedown.select2.' + container.id);
+    $(window).off('scroll.select2.' + container.id);
   };
 
   BaseSelection.prototype.position = function ($selection, $container) {
@@ -91,8 +98,7 @@ define([
   };
 
   BaseSelection.prototype.destroy = function () {
-    // Unbind the dropdown click handler if it exists
-    $(document.body).off('.select2.' + this.container.id);
+    this._detachCloseHandler();
   };
 
   BaseSelection.prototype.update = function (data) {

src/scss/_single.scss

@@ -13,6 +13,7 @@
     display: block;
     overflow: hidden;
     padding-left: 8px;
+    padding-right: 20px;
     text-overflow: ellipsis;
   }
 }

src/scss/theme/default/_single.scss

@@ -12,7 +12,6 @@
     cursor: pointer;
     float: right;
     font-weight: bold;
-    margin-right: 10px;
   }
 
   .select2-selection__placeholder {