Reverted changes to the scroll detection

This reverts the changes (from 3.5.x) to the scroll detection, so
Select2 will still reposition itself every time the window is
scrolled or resized. This has the benefit of fixing the issue when
the screen jumps if the dropdown is too high, which would previously
close the dropdown.

Select2 will also correctly set the positioning if it is pushed out
of the top of the viewport. Due to an unexpected bug, Select2 would
previously still display above the container, but would be styled
as if it were below it.

This closes https://github.com/select2/select2/issues/2961.
This closes https://github.com/select2/select2/issues/2956.

dist/js/select2.amd.full.js

@@ -826,15 +826,10 @@ 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) {
@@ -3274,6 +3269,7 @@ define('select2/dropdown/attachBody',[
 
     container.on('open', function () {
       self._showDropdown();
+      self._attachPositioningHandler(container);
 
       if (!setupResultsEvents) {
         setupResultsEvents = true;
@@ -3290,6 +3286,7 @@ define('select2/dropdown/attachBody',[
 
     container.on('close', function () {
       self._hideDropdown();
+      self._detachPositioningHandler(container);
     });
 
     this.$dropdownContainer.on('mousedown', function (evt) {
@@ -3329,6 +3326,27 @@ define('select2/dropdown/attachBody',[
     this.$dropdownContainer.detach();
   };
 
+  AttachBody.prototype._attachPositioningHandler = function (container) {
+    var self = this;
+
+    var scrollEvent = 'scroll.select2.' + container.id;
+    var resizeEvent = 'resize.select2.' + container.id;
+    var orientationEvent = 'orientationchange.select2.' + container.id;
+
+    $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
+      function (e) {
+      self._positionDropdown();
+    });
+  };
+
+  AttachBody.prototype._detachPositioningHandler = function (container) {
+    var scrollEvent = 'scroll.select2.' + container.id;
+    var resizeEvent = 'resize.select2.' + container.id;
+    var orientationEvent = 'orientationchange.select2.' + container.id;
+
+    $(window).off(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent);
+  };
+
   AttachBody.prototype._positionDropdown = function () {
     var $window = $(window);
 
@@ -3376,7 +3394,8 @@ define('select2/dropdown/attachBody',[
       newDirection = 'below';
     }
 
-    if (newDirection == 'above' || isCurrentlyAbove) {
+    if (newDirection == 'above' ||
+      (isCurrentlyAbove && newDirection !== 'below')) {
       css.top = container.top - dropdown.height;
     }
 

dist/js/select2.amd.js

@@ -826,15 +826,10 @@ 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) {
@@ -3274,6 +3269,7 @@ define('select2/dropdown/attachBody',[
 
     container.on('open', function () {
       self._showDropdown();
+      self._attachPositioningHandler(container);
 
       if (!setupResultsEvents) {
         setupResultsEvents = true;
@@ -3290,6 +3286,7 @@ define('select2/dropdown/attachBody',[
 
     container.on('close', function () {
       self._hideDropdown();
+      self._detachPositioningHandler(container);
     });
 
     this.$dropdownContainer.on('mousedown', function (evt) {
@@ -3329,6 +3326,27 @@ define('select2/dropdown/attachBody',[
     this.$dropdownContainer.detach();
   };
 
+  AttachBody.prototype._attachPositioningHandler = function (container) {
+    var self = this;
+
+    var scrollEvent = 'scroll.select2.' + container.id;
+    var resizeEvent = 'resize.select2.' + container.id;
+    var orientationEvent = 'orientationchange.select2.' + container.id;
+
+    $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
+      function (e) {
+      self._positionDropdown();
+    });
+  };
+
+  AttachBody.prototype._detachPositioningHandler = function (container) {
+    var scrollEvent = 'scroll.select2.' + container.id;
+    var resizeEvent = 'resize.select2.' + container.id;
+    var orientationEvent = 'orientationchange.select2.' + container.id;
+
+    $(window).off(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent);
+  };
+
   AttachBody.prototype._positionDropdown = function () {
     var $window = $(window);
 
@@ -3376,7 +3394,8 @@ define('select2/dropdown/attachBody',[
       newDirection = 'below';
     }
 
-    if (newDirection == 'above' || isCurrentlyAbove) {
+    if (newDirection == 'above' ||
+      (isCurrentlyAbove && newDirection !== 'below')) {
       css.top = container.top - dropdown.height;
     }
 

dist/js/select2.full.js

@@ -1264,15 +1264,10 @@ 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) {
@@ -3712,6 +3707,7 @@ define('select2/dropdown/attachBody',[
 
     container.on('open', function () {
       self._showDropdown();
+      self._attachPositioningHandler(container);
 
       if (!setupResultsEvents) {
         setupResultsEvents = true;
@@ -3728,6 +3724,7 @@ define('select2/dropdown/attachBody',[
 
     container.on('close', function () {
       self._hideDropdown();
+      self._detachPositioningHandler(container);
     });
 
     this.$dropdownContainer.on('mousedown', function (evt) {
@@ -3767,6 +3764,27 @@ define('select2/dropdown/attachBody',[
     this.$dropdownContainer.detach();
   };
 
+  AttachBody.prototype._attachPositioningHandler = function (container) {
+    var self = this;
+
+    var scrollEvent = 'scroll.select2.' + container.id;
+    var resizeEvent = 'resize.select2.' + container.id;
+    var orientationEvent = 'orientationchange.select2.' + container.id;
+
+    $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
+      function (e) {
+      self._positionDropdown();
+    });
+  };
+
+  AttachBody.prototype._detachPositioningHandler = function (container) {
+    var scrollEvent = 'scroll.select2.' + container.id;
+    var resizeEvent = 'resize.select2.' + container.id;
+    var orientationEvent = 'orientationchange.select2.' + container.id;
+
+    $(window).off(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent);
+  };
+
   AttachBody.prototype._positionDropdown = function () {
     var $window = $(window);
 
@@ -3814,7 +3832,8 @@ define('select2/dropdown/attachBody',[
       newDirection = 'below';
     }
 
-    if (newDirection == 'above' || isCurrentlyAbove) {
+    if (newDirection == 'above' ||
+      (isCurrentlyAbove && newDirection !== 'below')) {
       css.top = container.top - dropdown.height;
     }
 

dist/js/select2.js

@@ -1264,15 +1264,10 @@ 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) {
@@ -3712,6 +3707,7 @@ define('select2/dropdown/attachBody',[
 
     container.on('open', function () {
       self._showDropdown();
+      self._attachPositioningHandler(container);
 
       if (!setupResultsEvents) {
         setupResultsEvents = true;
@@ -3728,6 +3724,7 @@ define('select2/dropdown/attachBody',[
 
     container.on('close', function () {
       self._hideDropdown();
+      self._detachPositioningHandler(container);
     });
 
     this.$dropdownContainer.on('mousedown', function (evt) {
@@ -3767,6 +3764,27 @@ define('select2/dropdown/attachBody',[
     this.$dropdownContainer.detach();
   };
 
+  AttachBody.prototype._attachPositioningHandler = function (container) {
+    var self = this;
+
+    var scrollEvent = 'scroll.select2.' + container.id;
+    var resizeEvent = 'resize.select2.' + container.id;
+    var orientationEvent = 'orientationchange.select2.' + container.id;
+
+    $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
+      function (e) {
+      self._positionDropdown();
+    });
+  };
+
+  AttachBody.prototype._detachPositioningHandler = function (container) {
+    var scrollEvent = 'scroll.select2.' + container.id;
+    var resizeEvent = 'resize.select2.' + container.id;
+    var orientationEvent = 'orientationchange.select2.' + container.id;
+
+    $(window).off(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent);
+  };
+
   AttachBody.prototype._positionDropdown = function () {
     var $window = $(window);
 
@@ -3814,7 +3832,8 @@ define('select2/dropdown/attachBody',[
       newDirection = 'below';
     }
 
-    if (newDirection == 'above' || isCurrentlyAbove) {
+    if (newDirection == 'above' ||
+      (isCurrentlyAbove && newDirection !== 'below')) {
       css.top = container.top - dropdown.height;
     }
 

src/js/select2/dropdown/attachBody.js

@@ -16,6 +16,7 @@ define([
 
     container.on('open', function () {
       self._showDropdown();
+      self._attachPositioningHandler(container);
 
       if (!setupResultsEvents) {
         setupResultsEvents = true;
@@ -32,6 +33,7 @@ define([
 
     container.on('close', function () {
       self._hideDropdown();
+      self._detachPositioningHandler(container);
     });
 
     this.$dropdownContainer.on('mousedown', function (evt) {
@@ -71,6 +73,27 @@ define([
     this.$dropdownContainer.detach();
   };
 
+  AttachBody.prototype._attachPositioningHandler = function (container) {
+    var self = this;
+
+    var scrollEvent = 'scroll.select2.' + container.id;
+    var resizeEvent = 'resize.select2.' + container.id;
+    var orientationEvent = 'orientationchange.select2.' + container.id;
+
+    $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
+      function (e) {
+      self._positionDropdown();
+    });
+  };
+
+  AttachBody.prototype._detachPositioningHandler = function (container) {
+    var scrollEvent = 'scroll.select2.' + container.id;
+    var resizeEvent = 'resize.select2.' + container.id;
+    var orientationEvent = 'orientationchange.select2.' + container.id;
+
+    $(window).off(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent);
+  };
+
   AttachBody.prototype._positionDropdown = function () {
     var $window = $(window);
 
@@ -118,7 +141,8 @@ define([
       newDirection = 'below';
     }
 
-    if (newDirection == 'above' || isCurrentlyAbove) {
+    if (newDirection == 'above' ||
+      (isCurrentlyAbove && newDirection !== 'below')) {
       css.top = container.top - dropdown.height;
     }
 

src/js/select2/selection/base.js

@@ -100,15 +100,10 @@ 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) {