Set up the click handler for closing

Now the dropdown will automatically be closed when the user clicks
outside of it.

dist/js/select2.amd.full.js

@@ -1669,7 +1669,7 @@ define('select2/core',[
     // Bind the container to all of the adapters
     this._bindAdapters();
 
-    // Register any DOM event handler
+    // Register any DOM event handlers
     this._registerDomEvents();
 
     // Register any internal event handlers
@@ -1746,6 +1746,26 @@ define('select2/core',[
   Select2.prototype._registerDomEvents = function () {
     var self = this;
 
+    $(document.body).on('mousedown', function (e) {
+      var $target = $(e.target);
+
+      var $select = $target.closest('.select2');
+
+      var $all = $('.select2.open');
+
+      $all.each(function () {
+        var $this = $(this);
+
+        if (this == $select[0]) {
+          return;
+        }
+
+        var $element = $this.data('element');
+
+        $element.select2('close');
+      });
+    });
+
     this.$element.on('change', function () {
       self.data.current(function (data) {
         self.trigger('selection:update', {
@@ -1864,6 +1884,8 @@ define('select2/core',[
 
     this.$container = $container;
 
+    $container.data('element', this.$element);
+
     return $container;
   };
 

dist/js/select2.amd.js

@@ -1669,7 +1669,7 @@ define('select2/core',[
     // Bind the container to all of the adapters
     this._bindAdapters();
 
-    // Register any DOM event handler
+    // Register any DOM event handlers
     this._registerDomEvents();
 
     // Register any internal event handlers
@@ -1746,6 +1746,26 @@ define('select2/core',[
   Select2.prototype._registerDomEvents = function () {
     var self = this;
 
+    $(document.body).on('mousedown', function (e) {
+      var $target = $(e.target);
+
+      var $select = $target.closest('.select2');
+
+      var $all = $('.select2.open');
+
+      $all.each(function () {
+        var $this = $(this);
+
+        if (this == $select[0]) {
+          return;
+        }
+
+        var $element = $this.data('element');
+
+        $element.select2('close');
+      });
+    });
+
     this.$element.on('change', function () {
       self.data.current(function (data) {
         self.trigger('selection:update', {
@@ -1864,6 +1884,8 @@ define('select2/core',[
 
     this.$container = $container;
 
+    $container.data('element', this.$element);
+
     return $container;
   };
 

dist/js/select2.full.js

@@ -11204,7 +11204,7 @@ define('select2/core',[
     // Bind the container to all of the adapters
     this._bindAdapters();
 
-    // Register any DOM event handler
+    // Register any DOM event handlers
     this._registerDomEvents();
 
     // Register any internal event handlers
@@ -11281,6 +11281,26 @@ define('select2/core',[
   Select2.prototype._registerDomEvents = function () {
     var self = this;
 
+    $(document.body).on('mousedown', function (e) {
+      var $target = $(e.target);
+
+      var $select = $target.closest('.select2');
+
+      var $all = $('.select2.open');
+
+      $all.each(function () {
+        var $this = $(this);
+
+        if (this == $select[0]) {
+          return;
+        }
+
+        var $element = $this.data('element');
+
+        $element.select2('close');
+      });
+    });
+
     this.$element.on('change', function () {
       self.data.current(function (data) {
         self.trigger('selection:update', {
@@ -11399,6 +11419,8 @@ define('select2/core',[
 
     this.$container = $container;
 
+    $container.data('element', this.$element);
+
     return $container;
   };
 

dist/js/select2.js

@@ -2097,7 +2097,7 @@ define('select2/core',[
     // Bind the container to all of the adapters
     this._bindAdapters();
 
-    // Register any DOM event handler
+    // Register any DOM event handlers
     this._registerDomEvents();
 
     // Register any internal event handlers
@@ -2174,6 +2174,26 @@ define('select2/core',[
   Select2.prototype._registerDomEvents = function () {
     var self = this;
 
+    $(document.body).on('mousedown', function (e) {
+      var $target = $(e.target);
+
+      var $select = $target.closest('.select2');
+
+      var $all = $('.select2.open');
+
+      $all.each(function () {
+        var $this = $(this);
+
+        if (this == $select[0]) {
+          return;
+        }
+
+        var $element = $this.data('element');
+
+        $element.select2('close');
+      });
+    });
+
     this.$element.on('change', function () {
       self.data.current(function (data) {
         self.trigger('selection:update', {
@@ -2292,6 +2312,8 @@ define('select2/core',[
 
     this.$container = $container;
 
+    $container.data('element', this.$element);
+
     return $container;
   };
 

src/js/select2/core.js

@@ -128,6 +128,26 @@ define([
   Select2.prototype._registerDomEvents = function () {
     var self = this;
 
+    $(document.body).on('mousedown', function (e) {
+      var $target = $(e.target);
+
+      var $select = $target.closest('.select2');
+
+      var $all = $('.select2.open');
+
+      $all.each(function () {
+        var $this = $(this);
+
+        if (this == $select[0]) {
+          return;
+        }
+
+        var $element = $this.data('element');
+
+        $element.select2('close');
+      });
+    });
+
     this.$element.on('change', function () {
       self.data.current(function (data) {
         self.trigger('selection:update', {
@@ -246,6 +266,8 @@ define([
 
     this.$container = $container;
 
+    $container.data('element', this.$element);
+
     return $container;
   };