Added support for a click mask

In past versions of Select2, a mask was used to detect clicks
outside of the dropdown. While this works with high accuracy, and
avoid many of the click issues we had with modals, it is no longer
the default close handler for Select2. It blocks any features on
the container from working without a second click, and introduces
odd edge cases that we cannot easily handle.

dist/css/select2.css

@@ -87,6 +87,23 @@
   .select2-search--dropdown .select2-search--hide {
     display: none; }
 
+.select2-close-mask {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  min-height: 100%;
+  min-width: 100%;
+  height: auto;
+  width: auto;
+  opacity: 0;
+  z-index: 99;
+  background-color: #fff;
+  filter: alpha(opacity=0); }
+
 .select2-container--default .select2-selection--single {
   background-color: #fff;
   border: 1px solid #aaa;

dist/js/select2.amd.full.js

@@ -3709,9 +3709,12 @@ define('select2/dropdown/attachContainer',[
   }
 
   AttachContainer.prototype.position =
-    function (decorated, $container, $dropdown) {
+    function (decorated, $dropdown, $container) {
     var $dropdownContainer = $container.find('.dropdown-wrapper');
     $dropdownContainer.append($dropdown);
+
+    $dropdown.addClass('select2-dropdown--below');
+    $container.addClass('select2-container--below');
   };
 
   return AttachContainer;

dist/js/select2.full.js

@@ -13244,9 +13244,12 @@ define('select2/dropdown/attachContainer',[
   }
 
   AttachContainer.prototype.position =
-    function (decorated, $container, $dropdown) {
+    function (decorated, $dropdown, $container) {
     var $dropdownContainer = $container.find('.dropdown-wrapper');
     $dropdownContainer.append($dropdown);
+
+    $dropdown.addClass('select2-dropdown--below');
+    $container.addClass('select2-container--below');
   };
 
   return AttachContainer;

src/js/select2/dropdown/attachContainer.js

@@ -6,9 +6,12 @@ define([
   }
 
   AttachContainer.prototype.position =
-    function (decorated, $container, $dropdown) {
+    function (decorated, $dropdown, $container) {
     var $dropdownContainer = $container.find('.dropdown-wrapper');
     $dropdownContainer.append($dropdown);
+
+    $dropdown.addClass('select2-dropdown--below');
+    $container.addClass('select2-container--below');
   };
 
   return AttachContainer;

src/js/select2/selection/clickMask.js

@@ -0,0 +1,29 @@
+define([
+  'jquery'
+], function ($) {
+  function ClickMask () { }
+
+  ClickMask.prototype.bind = function (decorate, $container, container) {
+    var self = this;
+
+    decorate.call(this, $container, container);
+
+    this.$mask = $(
+      '<div class="select2-close-mask"></div>'
+    );
+
+    this.$mask.on('mousedown touchstart click', function () {
+      self.trigger('close');
+    });
+  };
+
+  ClickMask.prototype._attachCloseHandler = function (decorate, container) {
+    $(document.body).append(this.$mask);
+  };
+
+  ClickMask.prototype._detachCloseHandler = function (deocrate, container) {
+    this.$mask.detach();
+  };
+
+  return ClickMask;
+});

src/scss/core.scss

@@ -12,5 +12,26 @@
 
 @import "dropdown";
 
+.select2-close-mask {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  min-height: 100%;
+  min-width: 100%;
+  height: auto;
+  width: auto;
+  opacity: 0;
+  z-index: 99;
+
+  // styles required for IE to work
+
+  background-color: #fff;
+  filter: alpha(opacity=0);
+}
+
 @import "theme/default/layout";
 @import "theme/classic/layout";