Skip to content

Commit 6488551

Browse files
kevin-brownkevin-brown
committed
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 select2#2961. This closes select2#2956.
1 parent 981c406 commit 6488551

8 files changed

Lines changed: 129 additions & 34 deletions

File tree

‎dist/js/select2.amd.full.js‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -826,15 +826,10 @@ define('select2/selection/base',[
826826
$element.select2('close');
827827
});
828828
});
829-
830-
$(window).on('scroll.select2.' + container.id, function (e) {
831-
self.trigger('close');
832-
});
833829
};
834830

835831
BaseSelection.prototype._detachCloseHandler = function (container) {
836832
$(document.body).off('mousedown.select2.' + container.id);
837-
$(window).off('scroll.select2.' + container.id);
838833
};
839834

840835
BaseSelection.prototype.position = function ($selection, $container) {
@@ -3274,6 +3269,7 @@ define('select2/dropdown/attachBody',[
32743269

32753270
container.on('open', function () {
32763271
self._showDropdown();
3272+
self._attachPositioningHandler(container);
32773273

32783274
if (!setupResultsEvents) {
32793275
setupResultsEvents = true;
@@ -3290,6 +3286,7 @@ define('select2/dropdown/attachBody',[
32903286

32913287
container.on('close', function () {
32923288
self._hideDropdown();
3289+
self._detachPositioningHandler(container);
32933290
});
32943291

32953292
this.$dropdownContainer.on('mousedown', function (evt) {
@@ -3329,6 +3326,27 @@ define('select2/dropdown/attachBody',[
33293326
this.$dropdownContainer.detach();
33303327
};
33313328

3329+
AttachBody.prototype._attachPositioningHandler = function (container) {
3330+
var self = this;
3331+
3332+
var scrollEvent = 'scroll.select2.' + container.id;
3333+
var resizeEvent = 'resize.select2.' + container.id;
3334+
var orientationEvent = 'orientationchange.select2.' + container.id;
3335+
3336+
$(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
3337+
function (e) {
3338+
self._positionDropdown();
3339+
});
3340+
};
3341+
3342+
AttachBody.prototype._detachPositioningHandler = function (container) {
3343+
var scrollEvent = 'scroll.select2.' + container.id;
3344+
var resizeEvent = 'resize.select2.' + container.id;
3345+
var orientationEvent = 'orientationchange.select2.' + container.id;
3346+
3347+
$(window).off(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent);
3348+
};
3349+
33323350
AttachBody.prototype._positionDropdown = function () {
33333351
var $window = $(window);
33343352

@@ -3376,7 +3394,8 @@ define('select2/dropdown/attachBody',[
33763394
newDirection = 'below';
33773395
}
33783396

3379-
if (newDirection == 'above' || isCurrentlyAbove) {
3397+
if (newDirection == 'above' ||
3398+
(isCurrentlyAbove && newDirection !== 'below')) {
33803399
css.top = container.top - dropdown.height;
33813400
}
33823401

‎dist/js/select2.amd.js‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -826,15 +826,10 @@ define('select2/selection/base',[
826826
$element.select2('close');
827827
});
828828
});
829-
830-
$(window).on('scroll.select2.' + container.id, function (e) {
831-
self.trigger('close');
832-
});
833829
};
834830

835831
BaseSelection.prototype._detachCloseHandler = function (container) {
836832
$(document.body).off('mousedown.select2.' + container.id);
837-
$(window).off('scroll.select2.' + container.id);
838833
};
839834

840835
BaseSelection.prototype.position = function ($selection, $container) {
@@ -3274,6 +3269,7 @@ define('select2/dropdown/attachBody',[
32743269

32753270
container.on('open', function () {
32763271
self._showDropdown();
3272+
self._attachPositioningHandler(container);
32773273

32783274
if (!setupResultsEvents) {
32793275
setupResultsEvents = true;
@@ -3290,6 +3286,7 @@ define('select2/dropdown/attachBody',[
32903286

32913287
container.on('close', function () {
32923288
self._hideDropdown();
3289+
self._detachPositioningHandler(container);
32933290
});
32943291

32953292
this.$dropdownContainer.on('mousedown', function (evt) {
@@ -3329,6 +3326,27 @@ define('select2/dropdown/attachBody',[
33293326
this.$dropdownContainer.detach();
33303327
};
33313328

3329+
AttachBody.prototype._attachPositioningHandler = function (container) {
3330+
var self = this;
3331+
3332+
var scrollEvent = 'scroll.select2.' + container.id;
3333+
var resizeEvent = 'resize.select2.' + container.id;
3334+
var orientationEvent = 'orientationchange.select2.' + container.id;
3335+
3336+
$(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
3337+
function (e) {
3338+
self._positionDropdown();
3339+
});
3340+
};
3341+
3342+
AttachBody.prototype._detachPositioningHandler = function (container) {
3343+
var scrollEvent = 'scroll.select2.' + container.id;
3344+
var resizeEvent = 'resize.select2.' + container.id;
3345+
var orientationEvent = 'orientationchange.select2.' + container.id;
3346+
3347+
$(window).off(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent);
3348+
};
3349+
33323350
AttachBody.prototype._positionDropdown = function () {
33333351
var $window = $(window);
33343352

@@ -3376,7 +3394,8 @@ define('select2/dropdown/attachBody',[
33763394
newDirection = 'below';
33773395
}
33783396

3379-
if (newDirection == 'above' || isCurrentlyAbove) {
3397+
if (newDirection == 'above' ||
3398+
(isCurrentlyAbove && newDirection !== 'below')) {
33803399
css.top = container.top - dropdown.height;
33813400
}
33823401

‎dist/js/select2.full.js‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1264,15 +1264,10 @@ define('select2/selection/base',[
12641264
$element.select2('close');
12651265
});
12661266
});
1267-
1268-
$(window).on('scroll.select2.' + container.id, function (e) {
1269-
self.trigger('close');
1270-
});
12711267
};
12721268

12731269
BaseSelection.prototype._detachCloseHandler = function (container) {
12741270
$(document.body).off('mousedown.select2.' + container.id);
1275-
$(window).off('scroll.select2.' + container.id);
12761271
};
12771272

12781273
BaseSelection.prototype.position = function ($selection, $container) {
@@ -3712,6 +3707,7 @@ define('select2/dropdown/attachBody',[
37123707

37133708
container.on('open', function () {
37143709
self._showDropdown();
3710+
self._attachPositioningHandler(container);
37153711

37163712
if (!setupResultsEvents) {
37173713
setupResultsEvents = true;
@@ -3728,6 +3724,7 @@ define('select2/dropdown/attachBody',[
37283724

37293725
container.on('close', function () {
37303726
self._hideDropdown();
3727+
self._detachPositioningHandler(container);
37313728
});
37323729

37333730
this.$dropdownContainer.on('mousedown', function (evt) {
@@ -3767,6 +3764,27 @@ define('select2/dropdown/attachBody',[
37673764
this.$dropdownContainer.detach();
37683765
};
37693766

3767+
AttachBody.prototype._attachPositioningHandler = function (container) {
3768+
var self = this;
3769+
3770+
var scrollEvent = 'scroll.select2.' + container.id;
3771+
var resizeEvent = 'resize.select2.' + container.id;
3772+
var orientationEvent = 'orientationchange.select2.' + container.id;
3773+
3774+
$(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
3775+
function (e) {
3776+
self._positionDropdown();
3777+
});
3778+
};
3779+
3780+
AttachBody.prototype._detachPositioningHandler = function (container) {
3781+
var scrollEvent = 'scroll.select2.' + container.id;
3782+
var resizeEvent = 'resize.select2.' + container.id;
3783+
var orientationEvent = 'orientationchange.select2.' + container.id;
3784+
3785+
$(window).off(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent);
3786+
};
3787+
37703788
AttachBody.prototype._positionDropdown = function () {
37713789
var $window = $(window);
37723790

@@ -3814,7 +3832,8 @@ define('select2/dropdown/attachBody',[
38143832
newDirection = 'below';
38153833
}
38163834

3817-
if (newDirection == 'above' || isCurrentlyAbove) {
3835+
if (newDirection == 'above' ||
3836+
(isCurrentlyAbove && newDirection !== 'below')) {
38183837
css.top = container.top - dropdown.height;
38193838
}
38203839

‎dist/js/select2.full.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/select2.js‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1264,15 +1264,10 @@ define('select2/selection/base',[
12641264
$element.select2('close');
12651265
});
12661266
});
1267-
1268-
$(window).on('scroll.select2.' + container.id, function (e) {
1269-
self.trigger('close');
1270-
});
12711267
};
12721268

12731269
BaseSelection.prototype._detachCloseHandler = function (container) {
12741270
$(document.body).off('mousedown.select2.' + container.id);
1275-
$(window).off('scroll.select2.' + container.id);
12761271
};
12771272

12781273
BaseSelection.prototype.position = function ($selection, $container) {
@@ -3712,6 +3707,7 @@ define('select2/dropdown/attachBody',[
37123707

37133708
container.on('open', function () {
37143709
self._showDropdown();
3710+
self._attachPositioningHandler(container);
37153711

37163712
if (!setupResultsEvents) {
37173713
setupResultsEvents = true;
@@ -3728,6 +3724,7 @@ define('select2/dropdown/attachBody',[
37283724

37293725
container.on('close', function () {
37303726
self._hideDropdown();
3727+
self._detachPositioningHandler(container);
37313728
});
37323729

37333730
this.$dropdownContainer.on('mousedown', function (evt) {
@@ -3767,6 +3764,27 @@ define('select2/dropdown/attachBody',[
37673764
this.$dropdownContainer.detach();
37683765
};
37693766

3767+
AttachBody.prototype._attachPositioningHandler = function (container) {
3768+
var self = this;
3769+
3770+
var scrollEvent = 'scroll.select2.' + container.id;
3771+
var resizeEvent = 'resize.select2.' + container.id;
3772+
var orientationEvent = 'orientationchange.select2.' + container.id;
3773+
3774+
$(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
3775+
function (e) {
3776+
self._positionDropdown();
3777+
});
3778+
};
3779+
3780+
AttachBody.prototype._detachPositioningHandler = function (container) {
3781+
var scrollEvent = 'scroll.select2.' + container.id;
3782+
var resizeEvent = 'resize.select2.' + container.id;
3783+
var orientationEvent = 'orientationchange.select2.' + container.id;
3784+
3785+
$(window).off(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent);
3786+
};
3787+
37703788
AttachBody.prototype._positionDropdown = function () {
37713789
var $window = $(window);
37723790

@@ -3814,7 +3832,8 @@ define('select2/dropdown/attachBody',[
38143832
newDirection = 'below';
38153833
}
38163834

3817-
if (newDirection == 'above' || isCurrentlyAbove) {
3835+
if (newDirection == 'above' ||
3836+
(isCurrentlyAbove && newDirection !== 'below')) {
38183837
css.top = container.top - dropdown.height;
38193838
}
38203839

‎dist/js/select2.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/select2/dropdown/attachBody.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ define([
1616

1717
container.on('open', function () {
1818
self._showDropdown();
19+
self._attachPositioningHandler(container);
1920

2021
if (!setupResultsEvents) {
2122
setupResultsEvents = true;
@@ -32,6 +33,7 @@ define([
3233

3334
container.on('close', function () {
3435
self._hideDropdown();
36+
self._detachPositioningHandler(container);
3537
});
3638

3739
this.$dropdownContainer.on('mousedown', function (evt) {
@@ -71,6 +73,27 @@ define([
7173
this.$dropdownContainer.detach();
7274
};
7375

76+
AttachBody.prototype._attachPositioningHandler = function (container) {
77+
var self = this;
78+
79+
var scrollEvent = 'scroll.select2.' + container.id;
80+
var resizeEvent = 'resize.select2.' + container.id;
81+
var orientationEvent = 'orientationchange.select2.' + container.id;
82+
83+
$(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
84+
function (e) {
85+
self._positionDropdown();
86+
});
87+
};
88+
89+
AttachBody.prototype._detachPositioningHandler = function (container) {
90+
var scrollEvent = 'scroll.select2.' + container.id;
91+
var resizeEvent = 'resize.select2.' + container.id;
92+
var orientationEvent = 'orientationchange.select2.' + container.id;
93+
94+
$(window).off(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent);
95+
};
96+
7497
AttachBody.prototype._positionDropdown = function () {
7598
var $window = $(window);
7699

@@ -118,7 +141,8 @@ define([
118141
newDirection = 'below';
119142
}
120143

121-
if (newDirection == 'above' || isCurrentlyAbove) {
144+
if (newDirection == 'above' ||
145+
(isCurrentlyAbove && newDirection !== 'below')) {
122146
css.top = container.top - dropdown.height;
123147
}
124148

‎src/js/select2/selection/base.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -100,15 +100,10 @@ define([
100100
$element.select2('close');
101101
});
102102
});
103-
104-
$(window).on('scroll.select2.' + container.id, function (e) {
105-
self.trigger('close');
106-
});
107103
};
108104

109105
BaseSelection.prototype._detachCloseHandler = function (container) {
110106
$(document.body).off('mousedown.select2.' + container.id);
111-
$(window).off('scroll.select2.' + container.id);
112107
};
113108

114109
BaseSelection.prototype.position = function ($selection, $container) {

0 commit comments

Comments
 (0)