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.

dist/js/select2.amd.full.js

@@ -333,6 +333,7 @@ define('select2/results',[
       self.$results.attr('aria-hidden', 'false');
 
       self.setClasses();
+      self.ensureHighlightVisible();
     });
 
     container.on('close', function () {
@@ -469,6 +470,31 @@ define('select2/results',[
     });
   };
 
+  Results.prototype.ensureHighlightVisible = function () {
+    var $highlighted = this.$results.find('.highlighted');
+
+    if ($highlighted.length === 0) {
+      return;
+    }
+
+    var $options = this.$results.find('[aria-selected]');
+
+    var currentIndex = $options.index($highlighted);
+
+    var currentOffset = this.$results.offset().top;
+    var nextTop = $highlighted.offset().top;
+    var nextOffset = this.$results.scrollTop() + (nextTop - currentOffset);
+
+    var offsetDelta = nextTop - currentOffset;
+    nextOffset -= $highlighted.outerHeight(false) * 2;
+
+    if (currentIndex <= 2) {
+      this.$results.scrollTop(0);
+    } else if (offsetDelta > this.$results.outerHeight() || offsetDelta < 0) {
+      this.$results.scrollTop(nextOffset);
+    }
+  };
+
   return Results;
 });
 

dist/js/select2.amd.js

@@ -333,6 +333,7 @@ define('select2/results',[
       self.$results.attr('aria-hidden', 'false');
 
       self.setClasses();
+      self.ensureHighlightVisible();
     });
 
     container.on('close', function () {
@@ -469,6 +470,31 @@ define('select2/results',[
     });
   };
 
+  Results.prototype.ensureHighlightVisible = function () {
+    var $highlighted = this.$results.find('.highlighted');
+
+    if ($highlighted.length === 0) {
+      return;
+    }
+
+    var $options = this.$results.find('[aria-selected]');
+
+    var currentIndex = $options.index($highlighted);
+
+    var currentOffset = this.$results.offset().top;
+    var nextTop = $highlighted.offset().top;
+    var nextOffset = this.$results.scrollTop() + (nextTop - currentOffset);
+
+    var offsetDelta = nextTop - currentOffset;
+    nextOffset -= $highlighted.outerHeight(false) * 2;
+
+    if (currentIndex <= 2) {
+      this.$results.scrollTop(0);
+    } else if (offsetDelta > this.$results.outerHeight() || offsetDelta < 0) {
+      this.$results.scrollTop(nextOffset);
+    }
+  };
+
   return Results;
 });
 

dist/js/select2.full.js

@@ -9871,6 +9871,7 @@ define('select2/results',[
       self.$results.attr('aria-hidden', 'false');
 
       self.setClasses();
+      self.ensureHighlightVisible();
     });
 
     container.on('close', function () {
@@ -10007,6 +10008,31 @@ define('select2/results',[
     });
   };
 
+  Results.prototype.ensureHighlightVisible = function () {
+    var $highlighted = this.$results.find('.highlighted');
+
+    if ($highlighted.length === 0) {
+      return;
+    }
+
+    var $options = this.$results.find('[aria-selected]');
+
+    var currentIndex = $options.index($highlighted);
+
+    var currentOffset = this.$results.offset().top;
+    var nextTop = $highlighted.offset().top;
+    var nextOffset = this.$results.scrollTop() + (nextTop - currentOffset);
+
+    var offsetDelta = nextTop - currentOffset;
+    nextOffset -= $highlighted.outerHeight(false) * 2;
+
+    if (currentIndex <= 2) {
+      this.$results.scrollTop(0);
+    } else if (offsetDelta > this.$results.outerHeight() || offsetDelta < 0) {
+      this.$results.scrollTop(nextOffset);
+    }
+  };
+
   return Results;
 });
 

dist/js/select2.js

@@ -762,6 +762,7 @@ define('select2/results',[
       self.$results.attr('aria-hidden', 'false');
 
       self.setClasses();
+      self.ensureHighlightVisible();
     });
 
     container.on('close', function () {
@@ -898,6 +899,31 @@ define('select2/results',[
     });
   };
 
+  Results.prototype.ensureHighlightVisible = function () {
+    var $highlighted = this.$results.find('.highlighted');
+
+    if ($highlighted.length === 0) {
+      return;
+    }
+
+    var $options = this.$results.find('[aria-selected]');
+
+    var currentIndex = $options.index($highlighted);
+
+    var currentOffset = this.$results.offset().top;
+    var nextTop = $highlighted.offset().top;
+    var nextOffset = this.$results.scrollTop() + (nextTop - currentOffset);
+
+    var offsetDelta = nextTop - currentOffset;
+    nextOffset -= $highlighted.outerHeight(false) * 2;
+
+    if (currentIndex <= 2) {
+      this.$results.scrollTop(0);
+    } else if (offsetDelta > this.$results.outerHeight() || offsetDelta < 0) {
+      this.$results.scrollTop(nextOffset);
+    }
+  };
+
   return Results;
 });
 

src/js/select2/results.js

@@ -183,6 +183,7 @@ define([
       self.$results.attr('aria-hidden', 'false');
 
       self.setClasses();
+      self.ensureHighlightVisible();
     });
 
     container.on('close', function () {
@@ -319,5 +320,30 @@ define([
     });
   };
 
+  Results.prototype.ensureHighlightVisible = function () {
+    var $highlighted = this.$results.find('.highlighted');
+
+    if ($highlighted.length === 0) {
+      return;
+    }
+
+    var $options = this.$results.find('[aria-selected]');
+
+    var currentIndex = $options.index($highlighted);
+
+    var currentOffset = this.$results.offset().top;
+    var nextTop = $highlighted.offset().top;
+    var nextOffset = this.$results.scrollTop() + (nextTop - currentOffset);
+
+    var offsetDelta = nextTop - currentOffset;
+    nextOffset -= $highlighted.outerHeight(false) * 2;
+
+    if (currentIndex <= 2) {
+      this.$results.scrollTop(0);
+    } else if (offsetDelta > this.$results.outerHeight() || offsetDelta < 0) {
+      this.$results.scrollTop(nextOffset);
+    }
+  };
+
   return Results;
 });