Skip to content

Commit 5dd5ad9

Browse files
kevin-brownkevin-brown
committed
Ensure that the highlighted result is visible
When opening the dropdown, the highlighted result will not always be scrolled into view if it isn't already.
1 parent a728d94 commit 5dd5ad9

7 files changed

Lines changed: 133 additions & 3 deletions

File tree

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,7 @@ define('select2/results',[
333333
self.$results.attr('aria-hidden', 'false');
334334

335335
self.setClasses();
336+
self.ensureHighlightVisible();
336337
});
337338

338339
container.on('close', function () {
@@ -469,6 +470,31 @@ define('select2/results',[
469470
});
470471
};
471472

473+
Results.prototype.ensureHighlightVisible = function () {
474+
var $highlighted = this.$results.find('.highlighted');
475+
476+
if ($highlighted.length === 0) {
477+
return;
478+
}
479+
480+
var $options = this.$results.find('[aria-selected]');
481+
482+
var currentIndex = $options.index($highlighted);
483+
484+
var currentOffset = this.$results.offset().top;
485+
var nextTop = $highlighted.offset().top;
486+
var nextOffset = this.$results.scrollTop() + (nextTop - currentOffset);
487+
488+
var offsetDelta = nextTop - currentOffset;
489+
nextOffset -= $highlighted.outerHeight(false) * 2;
490+
491+
if (currentIndex <= 2) {
492+
this.$results.scrollTop(0);
493+
} else if (offsetDelta > this.$results.outerHeight() || offsetDelta < 0) {
494+
this.$results.scrollTop(nextOffset);
495+
}
496+
};
497+
472498
return Results;
473499
});
474500

‎dist/js/select2.amd.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,7 @@ define('select2/results',[
333333
self.$results.attr('aria-hidden', 'false');
334334

335335
self.setClasses();
336+
self.ensureHighlightVisible();
336337
});
337338

338339
container.on('close', function () {
@@ -469,6 +470,31 @@ define('select2/results',[
469470
});
470471
};
471472

473+
Results.prototype.ensureHighlightVisible = function () {
474+
var $highlighted = this.$results.find('.highlighted');
475+
476+
if ($highlighted.length === 0) {
477+
return;
478+
}
479+
480+
var $options = this.$results.find('[aria-selected]');
481+
482+
var currentIndex = $options.index($highlighted);
483+
484+
var currentOffset = this.$results.offset().top;
485+
var nextTop = $highlighted.offset().top;
486+
var nextOffset = this.$results.scrollTop() + (nextTop - currentOffset);
487+
488+
var offsetDelta = nextTop - currentOffset;
489+
nextOffset -= $highlighted.outerHeight(false) * 2;
490+
491+
if (currentIndex <= 2) {
492+
this.$results.scrollTop(0);
493+
} else if (offsetDelta > this.$results.outerHeight() || offsetDelta < 0) {
494+
this.$results.scrollTop(nextOffset);
495+
}
496+
};
497+
472498
return Results;
473499
});
474500

‎dist/js/select2.full.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9871,6 +9871,7 @@ define('select2/results',[
98719871
self.$results.attr('aria-hidden', 'false');
98729872

98739873
self.setClasses();
9874+
self.ensureHighlightVisible();
98749875
});
98759876

98769877
container.on('close', function () {
@@ -10007,6 +10008,31 @@ define('select2/results',[
1000710008
});
1000810009
};
1000910010

10011+
Results.prototype.ensureHighlightVisible = function () {
10012+
var $highlighted = this.$results.find('.highlighted');
10013+
10014+
if ($highlighted.length === 0) {
10015+
return;
10016+
}
10017+
10018+
var $options = this.$results.find('[aria-selected]');
10019+
10020+
var currentIndex = $options.index($highlighted);
10021+
10022+
var currentOffset = this.$results.offset().top;
10023+
var nextTop = $highlighted.offset().top;
10024+
var nextOffset = this.$results.scrollTop() + (nextTop - currentOffset);
10025+
10026+
var offsetDelta = nextTop - currentOffset;
10027+
nextOffset -= $highlighted.outerHeight(false) * 2;
10028+
10029+
if (currentIndex <= 2) {
10030+
this.$results.scrollTop(0);
10031+
} else if (offsetDelta > this.$results.outerHeight() || offsetDelta < 0) {
10032+
this.$results.scrollTop(nextOffset);
10033+
}
10034+
};
10035+
1001010036
return Results;
1001110037
});
1001210038

‎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: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -762,6 +762,7 @@ define('select2/results',[
762762
self.$results.attr('aria-hidden', 'false');
763763

764764
self.setClasses();
765+
self.ensureHighlightVisible();
765766
});
766767

767768
container.on('close', function () {
@@ -898,6 +899,31 @@ define('select2/results',[
898899
});
899900
};
900901

902+
Results.prototype.ensureHighlightVisible = function () {
903+
var $highlighted = this.$results.find('.highlighted');
904+
905+
if ($highlighted.length === 0) {
906+
return;
907+
}
908+
909+
var $options = this.$results.find('[aria-selected]');
910+
911+
var currentIndex = $options.index($highlighted);
912+
913+
var currentOffset = this.$results.offset().top;
914+
var nextTop = $highlighted.offset().top;
915+
var nextOffset = this.$results.scrollTop() + (nextTop - currentOffset);
916+
917+
var offsetDelta = nextTop - currentOffset;
918+
nextOffset -= $highlighted.outerHeight(false) * 2;
919+
920+
if (currentIndex <= 2) {
921+
this.$results.scrollTop(0);
922+
} else if (offsetDelta > this.$results.outerHeight() || offsetDelta < 0) {
923+
this.$results.scrollTop(nextOffset);
924+
}
925+
};
926+
901927
return Results;
902928
});
903929

‎dist/js/select2.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/select2/results.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ define([
183183
self.$results.attr('aria-hidden', 'false');
184184

185185
self.setClasses();
186+
self.ensureHighlightVisible();
186187
});
187188

188189
container.on('close', function () {
@@ -319,5 +320,30 @@ define([
319320
});
320321
};
321322

323+
Results.prototype.ensureHighlightVisible = function () {
324+
var $highlighted = this.$results.find('.highlighted');
325+
326+
if ($highlighted.length === 0) {
327+
return;
328+
}
329+
330+
var $options = this.$results.find('[aria-selected]');
331+
332+
var currentIndex = $options.index($highlighted);
333+
334+
var currentOffset = this.$results.offset().top;
335+
var nextTop = $highlighted.offset().top;
336+
var nextOffset = this.$results.scrollTop() + (nextTop - currentOffset);
337+
338+
var offsetDelta = nextTop - currentOffset;
339+
nextOffset -= $highlighted.outerHeight(false) * 2;
340+
341+
if (currentIndex <= 2) {
342+
this.$results.scrollTop(0);
343+
} else if (offsetDelta > this.$results.outerHeight() || offsetDelta < 0) {
344+
this.$results.scrollTop(nextOffset);
345+
}
346+
};
347+
322348
return Results;
323349
});

0 commit comments

Comments
 (0)