Fixed keyboard scrolling

Now when scrolling through results with the keyboard, the
highlighted option will always be visible.

dist/css/select2.css

@@ -107,9 +107,9 @@
   border-bottom-right-radius: 0; }
 .select2-container.select2-theme-default .dropdown .search input {
   border: 1px solid #aaa; }
-.select2-container.select2-theme-default .dropdown .results {
+.select2-container.select2-theme-default .dropdown .results > .options {
   max-height: 200px;
-  overflow-y: scroll; }
+  overflow-y: auto; }
 .select2-container.select2-theme-default .dropdown .results .options .option.group {
   padding: 0; }
   .select2-container.select2-theme-default .dropdown .results .options .option.group .group-label {

dist/js/select2.amd.full.js

@@ -348,6 +348,16 @@ define('select2/results',[
       var $next = $options.eq(nextIndex);
 
       $next.trigger('mouseenter');
+
+      var currentOffset = self.$results.offset().top;
+      var nextTop = $next.offset().top;
+      var nextOffset = self.$results.scrollTop() + (nextTop - currentOffset);
+
+      if (nextIndex === 0) {
+        self.$results.scrollTop(0);
+      } else if (nextTop - currentOffset < 0) {
+        self.$results.scrollTop(nextOffset);
+      }
     });
 
     container.on('results:next', function () {
@@ -367,8 +377,17 @@ define('select2/results',[
       var $next = $options.eq(nextIndex);
 
       $next.trigger('mouseenter');
-      console.log($next.offset().top, self.$results.parent().scrollTop());
+
-      //self.$results.parents().scrollTop($next.offset().top);
+      var currentOffset = self.$results.offset().top +
+        self.$results.outerHeight(false);
+      var nextBottom = $next.offset().top + $next.outerHeight(false);
+      var nextOffset = self.$results.scrollTop() + nextBottom - currentOffset;
+
+      if (nextIndex === 0) {
+        self.$results.scrollTop(0);
+      } else if (nextBottom > currentOffset) {
+        self.$results.scrollTop(nextOffset);
+      }
     });
 
     this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
@@ -545,7 +564,7 @@ define('select2/selection/single',[
       // User exits the container
     });
 
-    this.$selection.on('keyup', function (evt) {
+    this.$selection.on('keydown', function (evt) {
       var key = evt.which;
 
       if (container.isOpen()) {
@@ -553,8 +572,12 @@ define('select2/selection/single',[
           self.trigger('results:select');
         } else if (key == KEYS.UP) {
           self.trigger('results:previous');
+
+          evt.preventDefault();
         } else if (key == KEYS.DOWN) {
           self.trigger('results:next');
+
+          evt.preventDefault();
         }
       } else {
         if (key == KEYS.ENTER || key == KEYS.SPACE) {
@@ -759,7 +782,7 @@ define('select2/data/base',[
   };
 
   BaseAdapter.prototype.generateResultId = function (data) {
-    var id = '';
+    var id = 'select2-result-';
 
     for (var i = 0; i < 4; i++) {
       var r = Math.floor(Math.random() * 16);

dist/js/select2.amd.js

@@ -348,6 +348,16 @@ define('select2/results',[
       var $next = $options.eq(nextIndex);
 
       $next.trigger('mouseenter');
+
+      var currentOffset = self.$results.offset().top;
+      var nextTop = $next.offset().top;
+      var nextOffset = self.$results.scrollTop() + (nextTop - currentOffset);
+
+      if (nextIndex === 0) {
+        self.$results.scrollTop(0);
+      } else if (nextTop - currentOffset < 0) {
+        self.$results.scrollTop(nextOffset);
+      }
     });
 
     container.on('results:next', function () {
@@ -367,8 +377,17 @@ define('select2/results',[
       var $next = $options.eq(nextIndex);
 
       $next.trigger('mouseenter');
-      console.log($next.offset().top, self.$results.parent().scrollTop());
+
-      //self.$results.parents().scrollTop($next.offset().top);
+      var currentOffset = self.$results.offset().top +
+        self.$results.outerHeight(false);
+      var nextBottom = $next.offset().top + $next.outerHeight(false);
+      var nextOffset = self.$results.scrollTop() + nextBottom - currentOffset;
+
+      if (nextIndex === 0) {
+        self.$results.scrollTop(0);
+      } else if (nextBottom > currentOffset) {
+        self.$results.scrollTop(nextOffset);
+      }
     });
 
     this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
@@ -545,7 +564,7 @@ define('select2/selection/single',[
       // User exits the container
     });
 
-    this.$selection.on('keyup', function (evt) {
+    this.$selection.on('keydown', function (evt) {
       var key = evt.which;
 
       if (container.isOpen()) {
@@ -553,8 +572,12 @@ define('select2/selection/single',[
           self.trigger('results:select');
         } else if (key == KEYS.UP) {
           self.trigger('results:previous');
+
+          evt.preventDefault();
         } else if (key == KEYS.DOWN) {
           self.trigger('results:next');
+
+          evt.preventDefault();
         }
       } else {
         if (key == KEYS.ENTER || key == KEYS.SPACE) {
@@ -759,7 +782,7 @@ define('select2/data/base',[
   };
 
   BaseAdapter.prototype.generateResultId = function (data) {
-    var id = '';
+    var id = 'select2-result-';
 
     for (var i = 0; i < 4; i++) {
       var r = Math.floor(Math.random() * 16);

dist/js/select2.full.js

@@ -9886,6 +9886,16 @@ define('select2/results',[
       var $next = $options.eq(nextIndex);
 
       $next.trigger('mouseenter');
+
+      var currentOffset = self.$results.offset().top;
+      var nextTop = $next.offset().top;
+      var nextOffset = self.$results.scrollTop() + (nextTop - currentOffset);
+
+      if (nextIndex === 0) {
+        self.$results.scrollTop(0);
+      } else if (nextTop - currentOffset < 0) {
+        self.$results.scrollTop(nextOffset);
+      }
     });
 
     container.on('results:next', function () {
@@ -9905,8 +9915,17 @@ define('select2/results',[
       var $next = $options.eq(nextIndex);
 
       $next.trigger('mouseenter');
-      console.log($next.offset().top, self.$results.parent().scrollTop());
+
-      //self.$results.parents().scrollTop($next.offset().top);
+      var currentOffset = self.$results.offset().top +
+        self.$results.outerHeight(false);
+      var nextBottom = $next.offset().top + $next.outerHeight(false);
+      var nextOffset = self.$results.scrollTop() + nextBottom - currentOffset;
+
+      if (nextIndex === 0) {
+        self.$results.scrollTop(0);
+      } else if (nextBottom > currentOffset) {
+        self.$results.scrollTop(nextOffset);
+      }
     });
 
     this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
@@ -10083,7 +10102,7 @@ define('select2/selection/single',[
       // User exits the container
     });
 
-    this.$selection.on('keyup', function (evt) {
+    this.$selection.on('keydown', function (evt) {
       var key = evt.which;
 
       if (container.isOpen()) {
@@ -10091,8 +10110,12 @@ define('select2/selection/single',[
           self.trigger('results:select');
         } else if (key == KEYS.UP) {
           self.trigger('results:previous');
+
+          evt.preventDefault();
         } else if (key == KEYS.DOWN) {
           self.trigger('results:next');
+
+          evt.preventDefault();
         }
       } else {
         if (key == KEYS.ENTER || key == KEYS.SPACE) {
@@ -10297,7 +10320,7 @@ define('select2/data/base',[
   };
 
   BaseAdapter.prototype.generateResultId = function (data) {
-    var id = '';
+    var id = 'select2-result-';
 
     for (var i = 0; i < 4; i++) {
       var r = Math.floor(Math.random() * 16);

dist/js/select2.js

@@ -777,6 +777,16 @@ define('select2/results',[
       var $next = $options.eq(nextIndex);
 
       $next.trigger('mouseenter');
+
+      var currentOffset = self.$results.offset().top;
+      var nextTop = $next.offset().top;
+      var nextOffset = self.$results.scrollTop() + (nextTop - currentOffset);
+
+      if (nextIndex === 0) {
+        self.$results.scrollTop(0);
+      } else if (nextTop - currentOffset < 0) {
+        self.$results.scrollTop(nextOffset);
+      }
     });
 
     container.on('results:next', function () {
@@ -796,8 +806,17 @@ define('select2/results',[
       var $next = $options.eq(nextIndex);
 
       $next.trigger('mouseenter');
-      console.log($next.offset().top, self.$results.parent().scrollTop());
+
-      //self.$results.parents().scrollTop($next.offset().top);
+      var currentOffset = self.$results.offset().top +
+        self.$results.outerHeight(false);
+      var nextBottom = $next.offset().top + $next.outerHeight(false);
+      var nextOffset = self.$results.scrollTop() + nextBottom - currentOffset;
+
+      if (nextIndex === 0) {
+        self.$results.scrollTop(0);
+      } else if (nextBottom > currentOffset) {
+        self.$results.scrollTop(nextOffset);
+      }
     });
 
     this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
@@ -974,7 +993,7 @@ define('select2/selection/single',[
       // User exits the container
     });
 
-    this.$selection.on('keyup', function (evt) {
+    this.$selection.on('keydown', function (evt) {
       var key = evt.which;
 
       if (container.isOpen()) {
@@ -982,8 +1001,12 @@ define('select2/selection/single',[
           self.trigger('results:select');
         } else if (key == KEYS.UP) {
           self.trigger('results:previous');
+
+          evt.preventDefault();
         } else if (key == KEYS.DOWN) {
           self.trigger('results:next');
+
+          evt.preventDefault();
         }
       } else {
         if (key == KEYS.ENTER || key == KEYS.SPACE) {
@@ -1188,7 +1211,7 @@ define('select2/data/base',[
   };
 
   BaseAdapter.prototype.generateResultId = function (data) {
-    var id = '';
+    var id = 'select2-result-';
 
     for (var i = 0; i < 4; i++) {
       var r = Math.floor(Math.random() * 16);

src/js/select2/data/base.js

@@ -20,7 +20,7 @@ define([
   };
 
   BaseAdapter.prototype.generateResultId = function (data) {
-    var id = '';
+    var id = 'select2-result-';
 
     for (var i = 0; i < 4; i++) {
       var r = Math.floor(Math.random() * 16);

src/js/select2/results.js

@@ -209,6 +209,16 @@ define([
       var $next = $options.eq(nextIndex);
 
       $next.trigger('mouseenter');
+
+      var currentOffset = self.$results.offset().top;
+      var nextTop = $next.offset().top;
+      var nextOffset = self.$results.scrollTop() + (nextTop - currentOffset);
+
+      if (nextIndex === 0) {
+        self.$results.scrollTop(0);
+      } else if (nextTop - currentOffset < 0) {
+        self.$results.scrollTop(nextOffset);
+      }
     });
 
     container.on('results:next', function () {
@@ -228,8 +238,17 @@ define([
       var $next = $options.eq(nextIndex);
 
       $next.trigger('mouseenter');
-      console.log($next.offset().top, self.$results.parent().scrollTop());
+
-      //self.$results.parents().scrollTop($next.offset().top);
+      var currentOffset = self.$results.offset().top +
+        self.$results.outerHeight(false);
+      var nextBottom = $next.offset().top + $next.outerHeight(false);
+      var nextOffset = self.$results.scrollTop() + nextBottom - currentOffset;
+
+      if (nextIndex === 0) {
+        self.$results.scrollTop(0);
+      } else if (nextBottom > currentOffset) {
+        self.$results.scrollTop(nextOffset);
+      }
     });
 
     this.$results.on('mouseup', '.option[aria-selected]', function (evt) {

src/js/select2/selection/single.js

@@ -68,7 +68,7 @@ define([
       // User exits the container
     });
 
-    this.$selection.on('keyup', function (evt) {
+    this.$selection.on('keydown', function (evt) {
       var key = evt.which;
 
       if (container.isOpen()) {
@@ -76,8 +76,12 @@ define([
           self.trigger('results:select');
         } else if (key == KEYS.UP) {
           self.trigger('results:previous');
+
+          evt.preventDefault();
         } else if (key == KEYS.DOWN) {
           self.trigger('results:next');
+
+          evt.preventDefault();
         }
       } else {
         if (key == KEYS.ENTER || key == KEYS.SPACE) {

src/scss/theme/default/layout.scss

@@ -78,8 +78,10 @@
     }
 
     .results {
+      &> .options {
         max-height: 200px;
-      overflow-y: scroll;
+        overflow-y: auto;
+      }
 
       .options {
         .option {